寫一個下落的球可以非常有趣而且有趣,下面是一個基本的CSS示例:
.ball{ position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: red; animation-name: fall; animation-duration: 2s; animation-timing-function: ease-out; animation-fill-mode: forwards; } @keyframes fall{ 0%{ top: -50px; } 100%{ top: 500px; } }
這段CSS代碼使用了CSS3中的動畫屬性和關鍵幀。首先,我們聲明球的基本樣式包括大小、形狀和顏色,并將其絕對定位以便我們可以控制球的位置。接下來,我們使用關鍵幀來定義我們球的運動軌跡。在這個例子中,我們讓球從頂部開始掉落,最終在500像素的位置停止。動畫的持續時間是2秒,并且我們使用了"ease-out"的時間函數來使球最初下落速度相對較快,然后緩慢減速。
最后,我們使用animation- fill-mode: forwards屬性使球在動畫結束時停留在它最后的位置。如果這個屬性不被設置為"forwards",球將只下落并迅速返回原來的位置。
通過增加更多的關鍵幀和改變球的大小和顏色,你可以自由發揮,創建自己的獨特下落效果。還可以添加其他的CSS屬性來改變球的外觀,如box-shadow來添加一些陰影,或者使用transitions屬性來為球添加一個更平穩的動畫。
下一篇怎么寫出css盒子