CSS3 雨水 特效是一種炫酷的頁面裝飾特效，它能夠為網頁增添活力和生氣。下面我們來介紹一下如何用CSS3來制作這種特效。

.rain {
position: absolute;
top: -150px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,#f0f3f6 90%,#f0f3f6 100%), url('raindrop.png');
background-repeat: repeat;
animation: rain 1s linear infinite;
}
@keyframes rain {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 150px);
}
}

上面的代碼是CSS3實現雨水特效的代碼。其中，我們首先定義了一個名為“rain”的類，使用絕對定位，寬高度為100%，使其覆蓋整個頁面。我們使用了一個漸變的背景圖片和一張雨點的圖片來模擬雨滴的效果。然后使用了animation動畫來實現滴落的效果，循環播放。

在這個CSS3 雨水 特效中，我們需要注意幾個問題：

1. 圖片大小

要讓雨水特效顯得更自然，一般會使用一個實心的雨滴圖片作為背景，顯示在漸變的背景下面。這個圖片的大小推薦為40 x 40像素左右。

2. 背景樣式

通過使用linear-gradient屬性，我們可以將背景分成幾個不同的顏色層，來模擬雨天的效果。同時，我們也可以通過background-repeat屬性來調整圖片的排列方式，達到不同的效果。

3. 利用animation實現動畫效果

在這個特效中，我們使用了一個animation動畫來實現雨滴的滴落效果。我們通過定義@keyframes來設置動畫的開始狀態和結束狀態，并使用transform屬性來控制元素的位置移動。由于animation默認只執行一次，為了實現無限循環播放，需要將animation的iteration-count設置為infinite。

最后，我們可以將這個雨水特效應用在頁面的背景上，使整個頁面看起來更加生動有趣。