這篇文章給大家分享的是有關CSS3怎么實現頁面加載效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創新互聯建站專注于網站制作、成都做網站、網頁設計、網站制作、網站開發。公司秉持“客戶至上,用心服務”的宗旨,從客戶的利益和觀點出發,讓客戶在網絡營銷中找到自己的駐足之地。尊重和關懷每一位客戶，用嚴謹的態度對待客戶，用專業的服務創造價值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

知識點講解

（1）animation：設置動畫屬性

animation-name：設置需要綁定到選擇器的keyframe名稱。本例綁定的是load

animation-duration:完成動畫所需花費的時間，以秒或毫秒為單位。

animation-timing-function：動畫的速度曲線。

animation-delay：在動畫開始之前的延遲。

animation-iteration-count：動畫應該播放的次數。

animation-direction：是否應該輪流反向播放動畫。

例：設置動畫名為load,完成動畫所需時間為1.4s，以低速開始和結束，無限循環播放

animation:load1.4sinfiniteease-in-out;

（2）animation-fill-mode屬性

none：不改變默認行為。

forwards：當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。

backwards：在animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。

both：向前和向后填充模式都被應用。

（3）transform：scale(x,y)2D縮放轉換。

完整代碼