網(wǎng)站導(dǎo)航

CSS 實(shí)現(xiàn)加載動(dòng)畫之一-菊花旋轉(zhuǎn)

最近打算整理幾個(gè)動(dòng)畫樣式，最常見(jiàn)的就是我們用到的加載動(dòng)畫。加載動(dòng)畫的效果處理的好，會(huì)給頁(yè)面帶來(lái)畫龍點(diǎn)睛的作用，而使用戶愿意去等待。而頁(yè)面中最常用的做法是把動(dòng)畫做成gif格式，當(dāng)做背景圖或是img標(biāo)簽來(lái)引用，這種方式最簡(jiǎn)單，也不會(huì)有兼容性的問(wèn)題。不過(guò)本人有時(shí)愛(ài)折騰，看到一些動(dòng)畫的效果，不管是簡(jiǎn)單也好，復(fù)雜也好，也想嘗試用代碼來(lái)實(shí)現(xiàn)它，換一種思維方式，就算在項(xiàng)目中用到的可能性很小，自己多動(dòng)手多寫寫總歸不會(huì)有壞處。

CSS3新增了很多強(qiáng)大的功能，雖然會(huì)有兼容性的問(wèn)題，但是阻擋不了我們?nèi)ナ褂盟倪@些新特性。像一些簡(jiǎn)單的動(dòng)畫以前靠畫圖工具來(lái)實(shí)現(xiàn)，現(xiàn)在單純用CSS也能非常簡(jiǎn)單的實(shí)現(xiàn)。下面的案例就是利用CSS加html如何實(shí)現(xiàn)菊花旋轉(zhuǎn)的動(dòng)畫。

1.先看gif圖

2.代碼實(shí)現(xiàn)思路

將這個(gè)動(dòng)畫分解下，共有五個(gè)步驟，先用一張圖來(lái)說(shuō)明下：

2.1 先定義元素容器，定義每個(gè)線條的位置。

2.2 因?yàn)榭紤]到旋轉(zhuǎn)時(shí)每根線條的透明度不一致，故要把單根線條分為兩個(gè)區(qū)塊。

2.3 使用CSS的rotate方法來(lái)對(duì)線條進(jìn)行旋轉(zhuǎn)，旋轉(zhuǎn)的度數(shù)取決于線條的數(shù)量，最終使線條形成一個(gè)正圓。

2.4 在形成圓形的線條上面覆蓋一個(gè)與背景同色的正圓，正圓圓心與線條形成的圓心保持一致，這樣整個(gè)形狀就會(huì)有鏤空的感覺(jué)。

2.5 這一步最關(guān)鍵，就是形成動(dòng)畫的核心，其實(shí)整個(gè)動(dòng)畫的實(shí)現(xiàn)過(guò)程非常簡(jiǎn)單，就是改變每根線條的透明度，這個(gè)可以通過(guò)animation的動(dòng)畫延遲來(lái)實(shí)現(xiàn)，即每根線條的動(dòng)畫延遲時(shí)間根據(jù)其位置決定。

3. 主要使用的技術(shù)

主要用到了CSS3的rotate旋轉(zhuǎn)方法和animation方法。

3.1 rotate

rotate是transform方法中的一個(gè)屬性，除了rotate之外，還有translate(平移)，scale(縮放)，skew(拉伸)。具體的就不詳細(xì)解釋了。

3.2 animation

animation方法的使用步驟是先使用@關(guān)鍵字定義動(dòng)畫的關(guān)鍵幀，然后在對(duì)應(yīng)的樣式名稱里來(lái)引用。

案例中先定義動(dòng)畫load

@-webkit-keyframes load{
0%{opacity:0;}
100%{opacity:1;}
}

然后在使用動(dòng)畫的節(jié)點(diǎn)樣式里來(lái)引用

.m-load2 .line div:nth-child(1):before{-webkit-animation:load 1.2s linear 0s infinite;}

其中l(wèi)oad 1.2s linear 0s infinite這幾個(gè)值分別對(duì)應(yīng)動(dòng)畫的名稱，動(dòng)畫持續(xù)的時(shí)間，動(dòng)畫顯示的方式，動(dòng)畫的延遲時(shí)間，動(dòng)畫是否循環(huán)播放

另外還有動(dòng)畫播放的次數(shù)，動(dòng)畫是否反向播放等。

4.案例源代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>CSS3實(shí)現(xiàn)加載的動(dòng)畫效果1</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's css lib" />
<meta name="description" content="CSS3" />
<style>
*{margin:0;padding:0;}
body{background:#535353;}
.m-load,.m-load2{width:36px;height:36px;margin:100px auto;}
.m-load{background:url('load-v1.gif') #535353 center center no-repeat;}
.m-load2{background:#535353;}
/** 加載動(dòng)畫的靜態(tài)樣式 **/
.m-load2{position:relative;}
.m-load2 .line div{position:absolute;left:16px;top:0;width:3px;height:36px;}
.m-load2 .line div:before,.m-load2 .line div:after{content:'';display:block;height:50%;background:#fcfcfc;border-radius:5px;}
.m-load2 .line div:nth-child(2){-webkit-transform:rotate(30deg);}
.m-load2 .line div:nth-child(3){-webkit-transform:rotate(60deg);}
.m-load2 .line div:nth-child(4){-webkit-transform:rotate(90deg);}
.m-load2 .line div:nth-child(5){-webkit-transform:rotate(120deg);}
.m-load2 .line div:nth-child(6){-webkit-transform:rotate(150deg);}
.m-load2 .circlebg{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:#535353;border-radius:18px;}
/** 加載動(dòng)畫 **/
@-webkit-keyframes load{
    0%{opacity:0;}
    100%{opacity:1;}
}
.m-load2 .line div:nth-child(1):before{-webkit-animation:load 1.2s linear 0s infinite;}
.m-load2 .line div:nth-child(2):before{-webkit-animation:load 1.2s linear 0.1s infinite;}
.m-load2 .line div:nth-child(3):before{-webkit-animation:load 1.2s linear 0.2s infinite;}
.m-load2 .line div:nth-child(4):before{-webkit-animation:load 1.2s linear 0.3s infinite;}
.m-load2 .line div:nth-child(5):before{-webkit-animation:load 1.2s linear 0.4s infinite;}
.m-load2 .line div:nth-child(6):before{-webkit-animation:load 1.2s linear 0.5s infinite;}
.m-load2 .line div:nth-child(1):after{-webkit-animation:load 1.2s linear 0.6s infinite;}
.m-load2 .line div:nth-child(2):after{-webkit-animation:load 1.2s linear 0.7s infinite;}
.m-load2 .line div:nth-child(3):after{-webkit-animation:load 1.2s linear 0.8s infinite;}
.m-load2 .line div:nth-child(4):after{-webkit-animation:load 1.2s linear 0.9s infinite;}
.m-load2 .line div:nth-child(5):after{-webkit-animation:load 1.2s linear 1s infinite;}
.m-load2 .line div:nth-child(6):after{-webkit-animation:load 1.2s linear 1.1s infinite;}
</style>
</head>
<body>
<div class="m-load"></div>
<div class="m-load2">
    <div class="line">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="circlebg"></div>
</div>
</body>
</html>

旋轉(zhuǎn)