水滴動畫是CSS動畫中比較常見的一種，它能夠讓網頁更加生動有趣。下面我們來看一下如何使用CSS實現水滴動畫。

HTML結構：
<div class="drop">
<div class="drop-inner"></div>
</div>
CSS樣式：
.drop {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5bb5ff;
position: relative;
overflow: hidden;
}
.drop-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
transform: scale(0);
}
@keyframes drop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.drop:hover .drop-inner {
animation: drop 1s ease-out infinite;
}

首先在HTML中創建一個class為drop的div，并在其中嵌套一個class為drop-inner的div。然后在CSS樣式中對這兩個div進行設置，設置drop為一個圓形的div，并設置drop-inner為一個白色的圓形div。將drop-inner的寬度和高度設為100%，并設置position為absolute，并使其覆蓋在drop上方。設置transform的scale屬性，使drop-inner縮放為0。

接著，在CSS樣式中使用@keyframes定義一個名為drop的關鍵幀動畫，針對drop-inner進行操作。在關鍵幀動畫中，設定三個階段：0%、50% 和100%。這些階段分別定義了水滴的變化過程，使得水滴看起來像是在不斷地縮放和擴張。

最后，在CSS樣式中使用:hover偽類，使drop-inner響應鼠標懸浮事件，并執行drop動畫，讓水滴可以在鼠標懸浮時播放動畫。

這樣一個CSS制作的水滴動畫就完成了，非常簡單易懂。你也可以嘗試修改CSS樣式，制作不同效果的水滴動畫，讓你的網頁更加好玩、更有趣。