您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)CSS3怎么實(shí)現(xiàn)頁面加載效果的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
知識點(diǎn)講解
?。?)animation:設(shè)置動畫屬性
animation-name:設(shè)置需要綁定到選擇器的keyframe名稱。本例綁定的是load
animation-duration:完成動畫所需花費(fèi)的時間,以秒或毫秒為單位。
animation-timing-function:動畫的速度曲線。
animation-delay:在動畫開始之前的延遲。
animation-iteration-count:動畫應(yīng)該播放的次數(shù)。
animation-direction:是否應(yīng)該輪流反向播放動畫。
例:設(shè)置動畫名為load,完成動畫所需時間為1.4s,以低速開始和結(jié)束,無限循環(huán)播放
animation:load1.4sinfiniteease-in-out;
(2)animation-fill-mode屬性
none:不改變默認(rèn)行為。
forwards:當(dāng)動畫完成后,保持最后一個屬性值(在最后一個關(guān)鍵幀中定義)。
backwards:在animation-delay所指定的一段時間內(nèi),在動畫顯示之前,應(yīng)用開始屬性值(在第一個關(guān)鍵幀中定義)。
both:向前和向后填充模式都被應(yīng)用。
?。?)transform:scale(x,y)2D縮放轉(zhuǎn)換。
完整代碼
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
.load{
margin:300pxauto;
width:150px;
text-align:center;
}
.loaddiv{
width:30px;
height:30px;
background-color:rgb(118,224,250);
border-radius:100%;
display:inline-block;
-webkit-animation:load1.4sinfiniteease-in-out;
-webkit-animation-fill-mode:both;
}
.load.circle1{
-webkit-animation-delay:-0.32s;
}
.load.circle2{
-webkit-animation-delay:-0.16s;
}
@-webkit-keyframesload{
0%,80%,100%{-webkit-transform:scale(0.0)}
40%{-webkit-transform:scale(1.0)}
}
</style>
</head>
<body>
<divclass="load">
<divclass="circle1"></div>
<divclass="circle2"></div>
<divclass="circle3"></div>
</body>
</html>
感謝各位的閱讀!關(guān)于“CSS3怎么實(shí)現(xiàn)頁面加載效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。