CSS 是前端開發中的重要技能之一，它可以讓我們實現各種有趣的效果。其中，雨滴效果是一個讓人眼前一亮的效果，下面我們來看看如何使用 CSS 實現雨滴效果。

.raindrop {
height: 150px;
width: 150px;
background-color: #4d4dff;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
position: relative;
animation: drop 1s infinite ease-in-out;
}
.raindrop::after {
content: '';
position: absolute;
bottom: -30px;
height: 30px;
width: 30px;
background-color: #4d4dff;
border-radius: 50%;
}
@keyframes drop {
0% {
transform: translateY(-50px) rotate(45deg);
}
100% {
transform: translateY(500px) rotate(45deg);
}
}

代碼中，我們使用了一個 .raindrop 類來實現雨滴的樣式。設置了基礎的圓形樣式，并使用了 transform 屬性，將其旋轉 45 度。接著，我們使用偽類 ::after 來添加一個下部擴散的圓形，模擬雨滴落落水花濺起的效果。最后，我們使用動畫 keyframes 來讓雨滴沿著 y 軸落下，并循環播放。這樣，我們就實現了一個簡單的雨滴效果。