說起 CSS3 ，大家首先想到的可能是美麗的動畫效果，其中水滴動畫算是相對簡單而常見的一種。下面我們就來看看如何用 CSS3 實現水滴動畫。

// HTML 代碼
<div class="water">
<div class="drop"></div>
</div>
// CSS 代碼
.water {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #84ced7;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.drop {
position: absolute;
bottom: -20px;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
animation: drop 3s infinite;
}
@keyframes drop {
0% {
transform: translate(0, -100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(0, 100%);
opacity: 0;
}
}

運行代碼后，我們可以看到一個模擬水滴滴落的動畫效果。這里使用了 box-shadow 及圓形框的屬性，再結合 CSS3 的動畫屬性，就可以輕松實現這個效果。

總的來說，CSS3 動畫可以幫助我們實現各種各樣的視覺效果，如果你善于發揮，利用 CSS3 能夠將網頁制作得更加生動有趣。