用html和CSS實(shí)現(xiàn)頁(yè)面加載loading動(dòng)畫(huà)效果的方法

發(fā)布時(shí)間：2020-08-31 11:30:52 來(lái)源：億速云閱讀：1007 作者：小新欄目：web開(kāi)發(fā)

用html和CSS實(shí)現(xiàn)頁(yè)面加載loading動(dòng)畫(huà)效果的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

實(shí)現(xiàn)頁(yè)面加載loading動(dòng)畫(huà)效果需要用到很多CSS中的屬性，比如：animation動(dòng)畫(huà)，keyframes，border-radius圓角，border屬性等等，如果有小伙伴不知道這些屬性的，可以參考億速云的相關(guān)手冊(cè)：CSS手冊(cè) ，希望對(duì)你有所幫助。

以下是如何用HTML和CSS3實(shí)現(xiàn)頁(yè)面加載（loading）動(dòng)畫(huà)效果實(shí)例詳解：

HTML部分

創(chuàng)建一個(gè)div用于顯示加載動(dòng)畫(huà)，并給div一個(gè)class類(lèi)名，便于對(duì)其進(jìn)行樣式設(shè)置，（如果樣式不多也可以在標(biāo)簽內(nèi)設(shè)置樣式）具體代碼如下：

<body>
  <p style="font-size: 20px;">CSS加載樣式</p>
  <div class="load"></div>
 </body>

CSS部分

頁(yè)面的基本框架已經(jīng)有了，現(xiàn)在還需要用CSS對(duì)其進(jìn)行樣式設(shè)置，設(shè)置div的長(zhǎng)和高為120px，設(shè)置border-radius屬性值為50%，將其變?yōu)閳A形，用 border-top和border-bottom設(shè)置上下兩個(gè)弧形，便于后面的動(dòng)畫(huà)設(shè)置。

最后，為了使其旋轉(zhuǎn)起來(lái)，需要用animation和@keyframes屬性，具體代碼如下：

注意：使用animation和@keyframes動(dòng)畫(huà)時(shí)，注意瀏覽器的兼容性。（比如加前綴 -webkit- 和 -ms- ）

.load {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid blue;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
   }  
   @-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
    }
   
   @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }

loading效果效果圖：

用html和CSS實(shí)現(xiàn)頁(yè)面加載loading動(dòng)畫(huà)效果的方法

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)用html和CSS實(shí)現(xiàn)頁(yè)面加載loading動(dòng)畫(huà)效果的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

用html和CSS實(shí)現(xiàn)頁(yè)面加載loading動(dòng)畫(huà)效果的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽