小編給大家分享一下css3怎么繪制一個(gè)圓圓的loading轉(zhuǎn)圈動(dòng)畫(huà)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),龍沙網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:龍沙等地區(qū)。龍沙做網(wǎng)站價(jià)格咨詢(xún):18980820575

如何繪制一個(gè)圓圓的loading圈

小程序里需要一個(gè)像下面的loading，原生的沒(méi)有，引入別的組件庫(kù)又太大，所有決定自己寫(xiě)個(gè)。

1.基本原理

動(dòng)態(tài)的實(shí)現(xiàn)原理是給8個(gè)小圓圈設(shè)置透明度由大變小的動(dòng)畫(huà)，每個(gè)圓圈設(shè)置不同的動(dòng)畫(huà)啟動(dòng)時(shí)間。布局的實(shí)現(xiàn)原理是父元素設(shè)置為position: relative, 每個(gè)圓圈設(shè)置樣式為position: absolute; left: xx; top: xx; right: xx; bottom: xx。 通過(guò)給left/right/top/bottom設(shè)置不同的值將其均勻的分布在一個(gè)圓圈上。html代碼如下:

<view class="q-loading-dot-warp">  
                <view class="dot dot1"></view>
                <view class="dot dot2"></view>
                <view class="dot dot3"></view>
                <view class="dot dot4"></view>
                <view class="dot dot5"></view>
                <view class="dot dot6"></view>
                <view class="dot dot7"></view>
                <view class="dot dot8"></view>
</view>

說(shuō)起來(lái)簡(jiǎn)單，但是給它們賦值的時(shí)候沒(méi)有經(jīng)驗(yàn)，第一次用理科生的思維簡(jiǎn)單將圓三等分計(jì)算坐標(biāo)，往往8個(gè)圓圈就圍成了一個(gè)菱形/正方形。。。就像下面這樣

2. 位置設(shè)置技巧

后來(lái)看到 同學(xué)po的文章css3實(shí)現(xiàn)10中l(wèi)oading效果， 按照J(rèn)Rd3的代碼確實(shí)可以實(shí)現(xiàn)很好看的效果，但是當(dāng)我想換一換loading圓圈大小的時(shí)候，樣式就崩了，經(jīng)過(guò)分析，他們的坐標(biāo)是存在某種數(shù)學(xué)關(guān)系的，如下圖所示，在豎直或橫線上的坐標(biāo)可通過(guò)50%定位，斜線上的坐標(biāo)如圖中所示，其中w是矩形的寬高或者說(shuō)是8個(gè)小圓圈所圍成的大園的半徑。

公式推導(dǎo)如下:

具體css代碼如下:

$width: 64px;
$height: 64px;
$dotWidth: 10px;
$dotHeight: 10px;
$radius: 5px;
$offset: 9.37px;

@function getLeft( $x ) {
  @return ($width/4)*$x;
}

@function getTop( $y ) {
  @return ($height/4)*$y;
}

@keyframes changeOpacity {
    from { opacity: 1; }
    to { opacity: .2; }
}

.q-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .q-loading-overlay { 
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, .5);  
    }
    .q-loading-content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: $width;
        height: $height;
        z-index: 2;
    }
    .dot {
        width: 10px;
        height: 10px;
        position: absolute;
        background-color: #0033cc;
        border-radius: 50% 50%;
        opacity: 1;
        animation: changeOpacity 1.04s ease infinite;
    }
    .dot1 {
        left: 0;
        top: 50%;
        margin-top: -$radius;
        animation-delay: 0.13s;
    }
    .dot2 {
        left: $offset;
        top: $offset;
        animation-delay: 0.26s;
    }
    .dot3 {
        left: 50%;
        top: 0;
        margin-left: -$radius;
        animation-delay: 0.39s;
    }
    .dot4 {
        top: $offset;
        right: $offset;
        animation-delay: 0.52s;
    }
    .dot5 {
        right: 0;
        top: 50%;
        margin-top: -$radius;
        animation-delay: 0.65s;
    }
    .dot6 {
        right: $offset;
        bottom: $offset;
        animation-delay: 0.78s;
    }
    .dot7 {
        bottom: 0;
        left: 50%;
        margin-left: -$radius;
        animation-delay: 0.91s;
    }
    .dot8 {
        bottom: $offset;
        left: $offset;
        animation-delay: 1.04s;
    }
}

代碼使用scss定義了大圓和小圓圈的半徑，不管改成多大只需要更改變量，下面樣式無(wú)需改變。

通過(guò)這個(gè)公式計(jì)算的看起來(lái)就很像圓形了

3.動(dòng)畫(huà)時(shí)間設(shè)置

假設(shè)動(dòng)畫(huà)持續(xù)時(shí)間為 t， 圓圈個(gè)數(shù)為 c, 某個(gè)小圓圈的位置為 i (比如上面 i 取 1~8)，那么小圈相繼啟動(dòng)的時(shí)間為 i * t/c

以上是“css3怎么繪制一個(gè)圓圓的loading轉(zhuǎn)圈動(dòng)畫(huà)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：css3怎么繪制一個(gè)圓圓的loading轉(zhuǎn)圈動(dòng)畫(huà)-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://chinadenli.net/article8/dhpdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站制作、域名注冊(cè)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)