在CSS中,我們可以使用動畫來模擬物體的運動,比如小球自由落體。下面是一個使用CSS動畫制作的小球自由落體效果。
.ball { width: 50px; height: 50px; border-radius: 50%; background-color: red; position: absolute; animation: fall 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; } @keyframes fall { 0% { top: 0; } 100% { top: 500px; } }
上面代碼中,我們定義了一個球形元素,位置為絕對定位,使用動畫屬性進行落體模擬。在動畫中使用了貝塞爾曲線來獲得更自然的動態效果,球體最終停止到達的位置是在500像素高度。
這個小球自由落體的動畫效果非常簡單,但是這種能力可以讓我們在頁面中制作出更加酷炫的動態效果,從而為用戶帶來更好的體驗。