CSS實現創意的頁面載入（loading）動畫效果-css教學-PHP中文網

CSS實現創意的頁面載入（loading）動畫效果

yulia

發布： 2018-10-20 10:48:38

原創

3682 人瀏覽過

小朋友在瀏覽網站時有沒有遇到頁面「loading中，請稍後」的情況，身為前端工程師，你會用CSS製作頁面載入（loading）動畫效果嗎？這篇文章跟大家分享一個創意十足的頁面載入（loading）動畫程式碼，有一定的參考價值，有興趣的朋友可以看看。

製作一個創意十足的頁面載入（loading）動畫需要用到很多CSS中的屬性，例如：animation動畫，transform屬性等等，如有不清楚的小夥伴可以參考PHP中文網的相關文章，或訪問CSS影片教學。

實例描述：用div製作一個富有創意的正方形loading頁面效果，在加載過程中，正方形沿著Y軸翻轉，又沿X軸翻轉，具體代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .spinner {
    width: 60px;
    height: 60px;
    background-color: #67CF22;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
   }
   
   @-webkit-keyframes rotateplane {
    0% {
     -webkit-transform: perspective(120px)
    }
    50% {
     -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
     -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
   }
   
   @keyframes rotateplane {
    0% {
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
   }
  </style>
 </head>
 <body>
  <div class="spinner"></div>
 </body>
</html>

登入後複製

效果如圖所示：

CSS實現創意的頁面載入（loading）動畫效果