溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS實(shí)現(xiàn)富有創(chuàng)意的頁(yè)面加載動(dòng)畫效果的方法

發(fā)布時(shí)間：2020-10-20 16:52:52 來(lái)源：億速云 閱讀：125 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下CSS實(shí)現(xiàn)富有創(chuàng)意的頁(yè)面加載動(dòng)畫效果的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

制作一個(gè)富有創(chuàng)意的頁(yè)面加載（loading）動(dòng)畫需要用到很多CSS中的屬性，比如：animation動(dòng)畫，transform屬性等等。

實(shí)例描述：用div制作一個(gè)富有創(chuàng)意的正方形loading頁(yè)面效果，在加載過(guò)程中，正方形沿Y軸翻轉(zhuǎn)，又沿X軸翻轉(zhuǎn)，具體代碼如下：

<!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>

看完了這篇文章，相信你對(duì)CSS實(shí)現(xiàn)富有創(chuàng)意的頁(yè)面加載動(dòng)畫效果的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手