用CSS3制作圓圈loading效果需要用到很多CSS3中的屬性，比如：animation動(dòng)畫(huà)，keyframes，border-radius圓角等等。

10年積累的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有西湖免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

接下來(lái)給大家詳細(xì)介紹，如何用HTML和CSS制作頁(yè)面圓圈加載（loading）動(dòng)畫(huà)

HTML部分：

在頁(yè)面中創(chuàng)建一個(gè)div，用于放置圓圈加載動(dòng)畫(huà)，并給div一個(gè)class類名，便于對(duì)其設(shè)置CSS樣式，具體代碼如下：

  
CSS圓圈加載樣式
  
  

CSS部分：

首先設(shè)置div的長(zhǎng)和高為120px，然后將border-radius:設(shè)為50%，使其變?yōu)閳A形，用border: 16px solid #f3f3f3設(shè)置圓圈的寬度和顏色，最后通過(guò) border-top屬性，設(shè)置一個(gè)可以滾動(dòng)的部分?；緲邮酵瓿梢院?，就是用CSS3中的animation動(dòng)畫(huà)，讓其無(wú)限循環(huán)轉(zhuǎn)動(dòng)，具體代碼如下：

.loading {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    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);
    }
   }

注： -webkit- 和 -ms- 前綴用于那些不支持 animation 和 transform 屬性的瀏覽器，為了確保瀏覽器的兼容性，需要加上。

效果圖：

以上就是純CSS3實(shí)現(xiàn)頁(yè)面圓圈加載（loading）動(dòng)畫(huà)特效的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！