CSS3實作頁面載入效果的方法:先建立一個HTML範例檔案;然後在body中建立一個div;最後透過animation動畫和transform中的2D縮放轉換共同實作頁面載入效果即可。
本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
對於頁面載入的動畫我們可以做成不同形狀的效果,今天要分享的案例是將動畫做成圓形的形狀來載入頁面,在使用動畫時要注意瀏覽器相容問題
知識點詳解
(1)animation:設定動畫屬性
animation-name :設定需要綁定到選擇器的keyframe 名稱。本範例綁定的是load
animation-duration :完成動畫所需花費的時間,以秒或毫秒為單位。
animation-timing-function:動畫的速度曲線。
animation-delay:在動畫開始之前的延遲。
animation-iteration-count:動畫應該播放的次數。
animation-direction:是否應該輪流反向播放動畫。
範例:設定動畫名稱為load,完成動畫所需時間為1.4s,以低速開始和結束,無限循環播放
1 |
|
(2)animation-fill-mode 屬性
none :不改變預設行為。
forwards:當動畫完成後,請保持最後一個屬性值(在最後一個關鍵影格中定義)。
backwards:在 animation-delay 所指定的一段時間內,在動畫顯示之前,套用開始屬性值(在第一個關鍵影格中定義)。
both: 向前和向後填滿模式都被應用。
(3)transform :scale(x,y) 2D 縮放轉換。
完整程式碼
##
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
【建議課程:CSS3教學】
效果圖以上是CSS3如何實現頁面載入效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!