CSS水滴是一種在網頁中經常使用的效果，讓頁面看起來更加生動有趣。想要知道如何使用CSS來制作水滴效果嗎？下面是一份簡單易懂的視頻教程，讓你輕松掌握CSS水滴的制作方法。

// 第一步：HTML部分
<div class="drop">
<div class="drop-inner"></div>
</div>
// 第二步：CSS部分
.drop {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background: #b5d5ff;
overflow: hidden;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
margin: 50px auto;
}
.drop:before {
content: "";
position: absolute;
width: 120%;
height: 120%;
top: 0;
left: 0;
background: #8dc5ff;
border-radius: 50%;
transform: translateX(-50%) translateY(50%) rotate(45deg);
transition: all 0.5s ease-in-out;
}
.drop-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #03a9f4;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.drop:hover:before {
transform: translateX(-50%) translateY(0);
}

通過以上的HTML和CSS代碼，我們可以制作出一個CSS水滴的效果。其中，.drop是整個水滴的容器，.drop-inner是水滴里面的小圓點，.drop:before是水滴的波紋效果。其中，使用了:hover來控制鼠標懸浮時的效果。

希望這份CSS水滴制作的視頻教程能夠幫助到你學習和理解這個效果，讓你的網頁更加生動有趣！