CSS 下雨可以給網頁帶來很有趣的視覺效果，讓網頁更具有動感和生氣。下面我們將介紹如何使用 CSS 實現下雨效果。

// HTML 代碼
<div class="rain"></div>
// CSS 代碼
.rain {
height: 600px;
background-color: #1B1B1B;
background-image: linear-gradient(to bottom, transparent 90%, rgba(255,255,255,0.5) 91%);
background-size: 100% 30px;
position: relative;
}
.rain:before {
content: "";
position: absolute;
left: 50%;
top: -50px;
width: 1px;
height: 300px;
background-color: #fff;
box-shadow: 0 0 3px rgba(255,255,255,0.4);
animation: rain 0.75s linear infinite;
}
// 動畫代碼
@keyframes rain {
0% {
transform: translateX(-6px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(6px) rotate(45deg);
opacity: 0;
}
}

首先在 HTML 中創建一個空的 div 元素來實現下雨效果，然后在樣式表中設置該元素的高度和背景顏色。通過設置背景圖像為線性漸變，我們可以在頁面上創建透明的白線。下一步，使用偽元素 :before 來創建水滴。設置偽元素的寬度、高度、顏色和陰影，然后使用 CSS 動畫讓水滴在頁面上下落。

到此為止，我們就成功地實現了 CSS 下雨效果。這樣一個小小的效果不僅可以為網頁增添動感，還可以讓用戶有更好的體驗感。