亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

step by step:圓形loading進(jìn)度條實(shí)現(xiàn)步驟詳解

LancerComet / 1961人閱讀

摘要：簡(jiǎn)介實(shí)際開(kāi)發(fā)中，文件的圖片的加載等情形下經(jīng)常需要展示進(jìn)度情況。最簡(jiǎn)單的直接顯示百分之多少即可，然后一般情況下就是條形進(jìn)度條，設(shè)置長(zhǎng)度表示已完成進(jìn)度。這里介紹一下稍微復(fù)雜的圓形進(jìn)度條如何實(shí)現(xiàn)。

簡(jiǎn)介

實(shí)際開(kāi)發(fā)中，文件的download、upload、圖片的加載等情形下經(jīng)常需要展示進(jìn)度情況。 最簡(jiǎn)單的直接顯示百分之多少即可，然后一般情況下就是條形進(jìn)度條，設(shè)置長(zhǎng)度表示已完成進(jìn)度。這里介紹一下稍微復(fù)雜的圓形進(jìn)度條如何實(shí)現(xiàn)。

先來(lái)效果圖

需要了解的幾個(gè)CSS知識(shí)點(diǎn)

transform 旋轉(zhuǎn) (這里只需要用到2d )

clip 裁剪 設(shè)置元素的一部分可視

實(shí)現(xiàn)步驟

整體的圓是分成兩個(gè)半圓來(lái)實(shí)現(xiàn)的，為什么呢？因?yàn)橐?。。每個(gè)圓遮住一半，不然完整的圓滾來(lái)滾去跟沒(méi)滾一樣。
下面只說(shuō)明半圓的實(shí)現(xiàn)方式，最后拼在一起即可，以右半邊為例一步步說(shuō)明：

設(shè)圓整體區(qū)域 200px * 200px

遮住左邊的100*200

{
    clip: rect(0,200px,auto,100px) //不明白的先看相關(guān)資料
}

然后旋轉(zhuǎn)一定的角度

{
    transform: rotate(40px)   //不明白語(yǔ)法的先找下資料
}

看上圖發(fā)現(xiàn)，我們只要求半圓的實(shí)現(xiàn)，但上圖已經(jīng)超出右邊半圓到左邊區(qū)域了，到時(shí)候會(huì)覆蓋左邊，所以我們要把超出去的部分遮住，于是給右邊半圓設(shè)置父容器，它的大小形狀跟上面的半圓一樣，只是它不旋轉(zhuǎn)，這樣就能遮住超出去的旋轉(zhuǎn)半圓了。（這里我們給父容器加上底色）加上父容器后，效果如下。至此完成右邊半圓的設(shè)置，在加上左邊半圓，就搞定了。

Tips

具體使用時(shí)，當(dāng)進(jìn)度<= 50%，只有右邊旋轉(zhuǎn)，左邊保持不動(dòng)；>50%的時(shí)候，右邊旋轉(zhuǎn)180度，左邊也旋轉(zhuǎn)一定度數(shù)

旋轉(zhuǎn)的進(jìn)度條，除了用在圓上，矩形上也可以。一樣的道理，只是把旋轉(zhuǎn)的區(qū)域增大，然后用矩形來(lái)截取即可。

貼上實(shí)例代碼



    
    圓形進(jìn)度條

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111595.html

相關(guān)文章

  • 微信小程序之圓形進(jìn)度條

    摘要：需求概要小程序中使用圓形倒計(jì)時(shí)，效果圖思路使用個(gè)一個(gè)是背景圓環(huán)，一個(gè)是彩色圓環(huán)。 需求概要 小程序中使用圓形倒計(jì)時(shí)，效果圖：showImg(https://segmentfault.com/img/bV3Bko?w=265&h=267); 思路 使用2個(gè)canvas 一個(gè)是背景圓環(huán)，一個(gè)是彩色圓環(huán)。 使用setInterval 讓彩色圓環(huán)逐步繪制。 解決方案 第一步先寫(xiě)結(jié)構(gòu) 一個(gè)盒...

    陳江龍 評(píng)論0 收藏0

  • css3 制作圓環(huán)進(jìn)度條

    摘要：引子移動(dòng)端做一個(gè)加載的圖標(biāo)，跟以往沿用的都不太一樣，是一個(gè)圓環(huán)進(jìn)度條，圓環(huán)進(jìn)度條也就罷了，還得能用百分比控制。 引子 移動(dòng)端做一個(gè) loadiing 加載的圖標(biāo)，跟以往沿用的都不太一樣，是一個(gè)圓環(huán)進(jìn)度條，圓環(huán)進(jìn)度條也就罷了，還得能用百分比控制。 CSS3 實(shí)現(xiàn)圓環(huán) demo 剛開(kāi)始寫(xiě)這個(gè)圓環(huán)的時(shí)候是參照帖子上給出的css代碼代入，然后根據(jù)自己的需求改，發(fā)現(xiàn)圓環(huán)可以完美轉(zhuǎn)動(dòng)了，但是好像沒(méi)...

    xingpingz 評(píng)論0 收藏0

  • css3 制作圓環(huán)進(jìn)度條

    摘要：引子移動(dòng)端做一個(gè)加載的圖標(biāo)，跟以往沿用的都不太一樣，是一個(gè)圓環(huán)進(jìn)度條，圓環(huán)進(jìn)度條也就罷了，還得能用百分比控制。 引子 移動(dòng)端做一個(gè) loadiing 加載的圖標(biāo)，跟以往沿用的都不太一樣，是一個(gè)圓環(huán)進(jìn)度條，圓環(huán)進(jìn)度條也就罷了，還得能用百分比控制。 CSS3 實(shí)現(xiàn)圓環(huán) demo 剛開(kāi)始寫(xiě)這個(gè)圓環(huán)的時(shí)候是參照帖子上給出的css代碼代入，然后根據(jù)自己的需求改，發(fā)現(xiàn)圓環(huán)可以完美轉(zhuǎn)動(dòng)了，但是好像沒(méi)...

    mzlogin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<