CSS3-loading動畫（五）

CSS3-loading加載動畫

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

之前發了四篇，二十二個效果，今天再分享六個效果，總計二十八個效果。

二十三、效果二十三

 

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

一次完整運動分為四個階段：第一個階段，左上移動至右上，旋轉90°，寬高縮小；第二個階段，右上移動至右下，旋轉180°，寬高回復；第三個階段，右下移動至左下，旋轉270°，寬高縮小；第四個階段，左下移動至左上，旋轉360°，寬高回復。

動畫延遲時間差為負的半個動畫時間。

{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
      25% {
        -webkit-transform: scale(.5) rotateZ(90deg);
        transform: scale(.5) rotateZ(90deg);
        top: 0;
        left: 100%;
      }
      50% {
        -webkit-transform: scale(1) rotateZ(180deg);
        transform: scale(1) rotateZ(180deg);
        top: 100%;
        left: 100%;
      }
      75% {
        -webkit-transform: scale(.5) rotateZ(270deg);
        transform: scale(.5) rotateZ(270deg);
        top: 100%;
        left: 0;
      }
      100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
        top: 0;
        left: 0;
      }
    }

二十四、效果二十四

 

類似於火焰的跳動效果，將三個方形div定位至橫向居中，縱向底部，初始寬高均設為0。

向上移動的同時，改變方形的寬高即可。

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

二十五、效果二十五

 

很像小時候玩的游戲——吃豆人

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

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

吃豆人的嘴已經做出來了，剩下的，兩個div一個正向Z軸旋轉，一個反向Z軸旋轉，便做出來了吃的動作。

右側三個小球均定為至右側中部，向吃豆人的嘴中運動，將小球的動畫時間以及吃豆人的動畫時間調整適當即可。

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

二十六、效果二十六

 

會跳動的紙片

這個效果難點就在於下落變形的效果怎么做。其實很簡單。首先要明白，一個正方形，只要是繞Z軸旋轉90的倍數，那么看起來與原圖是一模一樣的，那么做這個效果就很簡單了，不用再考慮給每個角都加上一個變形的效果了。

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

@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，是為了讓形變看起來有彈性
      }
      75% {
        transform: translateY(25%) rotate(67.5deg)   //上升
      }
      100% {
        transform: translateY(0) rotate(90deg)        //旋轉90°結束一個周期，剛好和初始狀態一模一樣，那就直接重復執行動畫即可
      }
    }

陰影的效果就更好說了，做一個扁的橢圓出來，box-shadow加上陰影效果，適時是改變大小就OK了。

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

二十七、效果二十七

 

一個div，一個偽類就做出來了。

div負責旋轉，偽類負責改變高度，各司其職就做來了。

@keyframes locker_ball {           //div旋轉
      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;
      }
    }

二十八、效果二十八

 

時鍾的效果（我的定位好像沒有定在正中間）

時鍾的效果只用到一個關鍵幀動畫就搞定了，那就是旋轉360°，只要改變兩個指針的動畫運動時間即可。

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

 

 

本系列動畫中，有的停頓效果是通過關鍵幀控制從某百分比到某百分比一直保持該狀態達到的；而有的則是通過運動曲線ease來實現的。

 

完結撒花~過周末~