CSS3可實現的動畫效果非常豐富,包括物體的飛行、旋轉、彈跳等。其中,物體落下效果是比較基礎的一種動畫效果。
/*定義物體初始狀態*/ #object { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); } /*定義物體落下動畫*/ @keyframes fall { 0% { top: 0; } 100% { top: 300px; } } /*運用物體落下動畫*/ #object { animation: fall 1s linear forwards; }
上面的代碼演示了如何用CSS3實現物體落下效果。首先,我們定義物體的初始狀態,這里假設物體需要垂直落下,所以初始狀態的top值為0,left值為50%,即水平方向居中。同時,由于需要物體相對于頁面絕對定位,因此將物體的position屬性設為absolute。
接著,我們定義了一個名為fall的動畫,其中通過關鍵幀(@keyframes)來定義物體從開始到結束的動畫過程。這里,我們定義了0%和100%兩個關鍵幀,即物體初始狀態和結束狀態。在初始狀態時,物體在頁面頂部,即top值為0。在結束狀態時,物體已經落到了離頁面頂部300像素的位置,即top值為300px。
最后,我們將物體運用到動畫之中。具體地,設置了animation屬性,其中fall是動畫名稱,1s是動畫時間,linear是動畫速度曲線。最后,forwards表明動畫結束后將保持結束狀態。這樣,就完成了物體落下動畫的實現。
下一篇css3 滾動 圖片