在網(wǎng)頁設計中，落地陰影效果是非常常見的，一種比較實用的方法是使用CSS來完成。今天我們來學習如何使用CSS實現(xiàn)小球落地陰影效果。
我們先定義一個div，給其一個寬高及圓角，再加上陰影效果，代碼如下：

<div class="shadow"></div>
.shadow{
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
}

接下來我們讓小球落地，需在HTML中再嵌套一個div，來表示小球，CSS中設置它的寬高及圓角，再讓它定位到起始位置，并加上陰影，具體代碼如下：

<div class="shadow">
<div class="ball"></div>
</div>
.ball{
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
bottom: -50px;
left: 50px;
box-shadow: 0px 5px 35px 0px #666;
}

然后加上動畫，讓小球從初始位置向下運動，實現(xiàn)方法是：給小球設置CSS3動畫，調(diào)用keyframes關鍵字來定義動畫，再使用animation屬性來啟用動畫。代碼如下：

.ball{
/*代碼同上*/
animation: moveBall 2s ease-in-out forwards;
}
@keyframes moveBall {
0% {bottom: -50px;}
50% {bottom: 150px;}
100% {bottom: 0;}
}

這樣，一個小球落地陰影的效果就完成了。經(jīng)過這份教程的練習，我們可以開發(fā)出更多更有創(chuàng)意的網(wǎng)站效果。期待大家能夠在實踐中更深入地了解CSS的作用。