多種多樣的loading動畫分享-html教學-PHP中文網

多種多樣的loading動畫分享

零下一度

發布： 2017-07-26 17:40:30

原創

1525 人瀏覽過

多種多樣的loading動畫分享：

##效果二十三

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

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

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

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

登入後複製

二十四、效果二十四

類似火焰的跳動效果，將三個方形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來達成的。 ###### ######完結撒花~過週末~###

以上是多種多樣的loading動畫分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！