CSS 下雨可以給網(wǎng)頁(yè)帶來(lái)很有趣的視覺(jué)效果，讓網(wǎng)頁(yè)更具有動(dòng)感和生氣。下面我們將介紹如何使用 CSS 實(shí)現(xiàn)下雨效果。

// 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;
}
// 動(dòng)畫代碼
@keyframes rain {
0% {
transform: translateX(-6px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(6px) rotate(45deg);
opacity: 0;
}
}

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

到此為止，我們就成功地實(shí)現(xiàn)了 CSS 下雨效果。這樣一個(gè)小小的效果不僅可以為網(wǎng)頁(yè)增添動(dòng)感，還可以讓用戶有更好的體驗(yàn)感。