CSS3-loading動畫（五）

CSS3-loading加載動畫

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

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

二十3、效果二十三

 

兩個正方形，初始均定位至左上（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;
      }
    }

二十4、效果二十四

 

相似於火焰的跳動效果，將三個方形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;
      }
    }

二十5、效果二十五

 

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

左側吃豆人的製做：兩個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%;
      }
    }

二十6、效果二十六

 

會跳動的紙片

這個效果難點就在於下落變形的效果怎麼作。其實很簡單。首先要明白，一個正方形，只要是繞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);
      }
    }

二十7、效果二十七

 

一個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;
      }
    }

二十8、效果二十八

 

時鐘的效果（個人定位好像沒有定在正中間）

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

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

 

 

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

 

完結撒花~過週末~