CSS3學習之頁面載入動畫（五）

之前發了四篇，二十二個效果，這篇文章再給大家分享6種css3的頁面載入動畫，總計二十八個頁面載入動畫效果。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

在之前的文章【CSS3學習之頁面載入動畫（四）】中又分享了6個CSS3的載入動畫，今天繼續分享（標題接上一次）。

二十三、效果二十三

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

二十四、效果二十四

類似火焰的跳動效果，將三個方形p定位至橫向居中，縱向底部，初始寬高皆設為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;
      }
    }

二十五、效果二十五

##很像小時候玩的遊戲－吃豆人左側吃豆人的製作：兩個p寬高為0，只設定邊框，將右邊框的顏色屬性設為transparent ，代碼及效果如下：

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

吃豆人的嘴已經做出來了，剩下的，兩個p一個正向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);
      }
    }

二十七、效果二十七

#一個p，一個偽類別就做出來了。

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

@keyframes locker_ball {           //p旋转
      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來達成的。 ######完結撒花！希望本系列能對大家的學習有所幫助，更多相關教學請造訪### CSS基礎影片教學###，### CSS3影片教學###，###bootstrap教學###！ ###

以上是CSS3學習之頁面載入動畫（五）的詳細內容。更多資訊請關注PHP中文網其他相關文章！