国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

LancerComet / 1896人閱讀

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

簡介

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

先來效果圖

需要了解的幾個CSS知識點

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

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

實現(xiàn)步驟

整體的圓是分成兩個半圓來實現(xiàn)的,為什么呢?因為要。。。每個圓遮住一半,不然完整的圓滾來滾去跟沒滾一樣
下面只說明半圓的實現(xiàn)方式,最后拼在一起即可,以右半邊為例一步步說明:

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

遮住左邊的100*200

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

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

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

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

Tips

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

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

貼上實例代碼



    
    圓形進度條
    


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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/111595.html

相關(guān)文章

  • 微信小程序之圓形進度

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

    陳江龍 評論0 收藏0
  • css3 制作圓環(huán)進度

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

    xingpingz 評論0 收藏0
  • css3 制作圓環(huán)進度

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

    mzlogin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<