在線示例demo：http://liyunpei.xyz/loading.html

之前發(fā)了四篇，二十二個(gè)效果，今天再分享六個(gè)效果，總計(jì)二十八個(gè)效果。

二十三、效果二十三

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

兩個(gè)正方形，初始均定位至左上（top：0；left：0；）；

一次完整運(yùn)動(dòng)分為四個(gè)階段：第一個(gè)階段，左上移動(dòng)至右上，旋轉(zhuǎn)90°，寬高縮??；第二個(gè)階段，右上移動(dòng)至右下，旋轉(zhuǎn)180°，寬高回復(fù)；第三個(gè)階段，右下移動(dòng)至左下，旋轉(zhuǎn)270°，寬高縮小；第四個(gè)階段，左下移動(dòng)至左上，旋轉(zhuǎn)360°，寬高回復(fù)。

動(dòng)畫延遲時(shí)間差為負(fù)的半個(gè)動(dòng)畫時(shí)間。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

二十四、效果二十四

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

類似于火焰的跳動(dòng)效果，將三個(gè)方形div定位至橫向居中，縱向底部，初始寬高均設(shè)為0。

向上移動(dòng)的同時(shí)，改變方形的寬高即可。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {
      50% {
        height: 30px;
        width: 30px;
        top: 50%;
      }
      100% {
        height: 0;
        width: 0;
        top: 0;
      }
    }

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

二十五、效果二十五

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

很像小時(shí)候玩的游戲——吃豆人

左側(cè)吃豆人的制作：兩個(gè)div寬高為0，只設(shè)置邊框，將右邊框的顏色屬性設(shè)置為transparent，代碼及效果如下：

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

.pac_head {
      border: 25px solid #fff;
      border-right-color: transparent;
      border-radius: 50%;
    }

吃豆人的嘴已經(jīng)做出來(lái)了，剩下的，兩個(gè)div一個(gè)正向Z軸旋轉(zhuǎn)，一個(gè)反向Z軸旋轉(zhuǎn)，便做出來(lái)了吃的動(dòng)作。

右側(cè)三個(gè)小球均定為至右側(cè)中部，向吃豆人的嘴中運(yùn)動(dòng)，將小球的動(dòng)畫時(shí)間以及吃豆人的動(dòng)畫時(shí)間調(diào)整適當(dāng)即可。

@keyframes pac_ball {
      100% {
        right: 55%;
      }
    }

二十六、效果二十六

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

會(huì)跳動(dòng)的紙片

這個(gè)效果難點(diǎn)就在于下落變形的效果怎么做。其實(shí)很簡(jiǎn)單。首先要明白，一個(gè)正方形，只要是繞Z軸旋轉(zhuǎn)90的倍數(shù)，那么看起來(lái)與原圖是一模一樣的，那么做這個(gè)效果就很簡(jiǎn)單了，不用再考慮給每個(gè)角都加上一個(gè)變形的效果了。

變形效果：只要改變border-radius的值就可以產(chǎn)生這種變形了。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

@keyframes beat_ball {
      25% {
        transform: translateY(25%) rotate(22.5deg);//下落
        border-bottom-right-radius: 10%;
      }
      50% {
        border-bottom-right-radius: 100%;
        transform: translateY(50%) scale(1, 0.8) rotate(45deg)   //scale，是為了讓形變看起來(lái)有彈性      }
      75% {
        transform: translateY(25%) rotate(67.5deg)   //上升      }
      100% {
        transform: translateY(0) rotate(90deg)        //旋轉(zhuǎn)90°結(jié)束一個(gè)周期，剛好和初始狀態(tài)一模一樣，那就直接重復(fù)執(zhí)行動(dòng)畫即可      }
    }

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

陰影的效果就更好說(shuō)了，做一個(gè)扁的橢圓出來(lái)，box-shadow加上陰影效果，適時(shí)是改變大小就OK了。

@keyframes beat_shadow {
      50%{
        transform: scale(1.25,0.8);
      }
    }

二十七、效果二十七

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

一個(gè)div，一個(gè)偽類就做出來(lái)了。

div負(fù)責(zé)旋轉(zhuǎn)，偽類負(fù)責(zé)改變高度，各司其職就做來(lái)了。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

@keyframes locker_ball {           //div旋轉(zhuǎn)
      25%{
        transform: rotateZ(180deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(360deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }
    @keyframes locker_ballh {     //偽類高度改變
      25%{
        height: 40px;
      }
      50%{
        height: 0;
      }
      75%{
        height: 0;
      }
      100%{
        height: 40px;
      }
    }

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

二十八、效果二十八

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

時(shí)鐘的效果（我的定位好像沒(méi)有定在正中間）

時(shí)鐘的效果只用到一個(gè)關(guān)鍵幀動(dòng)畫就搞定了，那就是旋轉(zhuǎn)360°，只要改變兩個(gè)指針的動(dòng)畫運(yùn)動(dòng)時(shí)間即可。

@keyframes clock {
      100%{
        transform: rotateZ(360deg);
      }
    }

 

 

本系列動(dòng)畫中，有的停頓效果是通過(guò)關(guān)鍵幀控制從某百分比到某百分比一直保持該狀態(tài)達(dá)到的；而有的則是通過(guò)運(yùn)動(dòng)曲線ease來(lái)實(shí)現(xiàn)的。

http://www.cnblogs.com/smallcool/p/7170345.html