CSS3中的動畫效果非常豐富,其中重力下落效果是一種非常有趣的動畫效果。通過CSS3中的關鍵幀animation和transform屬性,我們可以輕松地實現重力下落效果。
/* 定義關鍵幀 */ @keyframes fall { 0% { transform: translateY(-200px); } 100% { transform: translateY(500px); } } /* 定義樣式 */ .box { background-color: #ff3636; width: 100px; height: 100px; position: absolute; border-radius: 50%; animation: fall 2s linear forwards; }
上面的代碼中,我們首先定義了一個關鍵幀fall,該關鍵幀定義了下落過程中的起始和結束狀態。
在樣式定義中,我們將一個class為box的div元素的position屬性設置為absolute,并且定義了div的寬度和高度。此外,我們還設置了div的border-radius屬性,使其呈圓形。最后,通過animation屬性,使div元素實現關鍵幀動畫fall,并且動畫持續時間為2秒。
通過以上代碼,我們就可以實現一個簡單的重力下落效果了。當然,還可以通過設置opacity屬性來漸變出現或消失的效果,或者通過設置transform屬性的rotate3d函數來加入旋轉效果,從而讓動畫更加豐富。
上一篇css3鏈接去掉下劃線
下一篇css3金屬文字效果