clip實(shí)現(xiàn)圓環(huán)進(jìn)度條

環(huán)形進(jìn)度條.gif

怎么實(shí)現(xiàn)這樣一個(gè)圓環(huán)進(jìn)度條的效果呢决乎,可以使用canvas、svg佃迄、GIF等等方式泼差,今天我們來說下使用css3怎么來實(shí)現(xiàn)贵少。

實(shí)現(xiàn)思路

圓環(huán)很簡單,一行cssborder-radius:50%即可實(shí)現(xiàn)堆缘,而且沒有兼容性問題滔灶,什么,你說IE吼肥,讓它滾...

我們這里需要三個(gè)圓環(huán)录平,一個(gè)整的,兩個(gè)半的缀皱。大概畫了下圖

image.png

這里半圓環(huán)我使用了clip進(jìn)行裁剪斗这,主要代碼如下,

.left{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid lightblue;
    position:absolute;
    top: -10px;   /* 10的原因是因?yàn)檫吙蚴?0個(gè)像素 */
    right: -10px;
    clip: rect(0 100px 200px 0);  /* 上面為0 右邊到100px
         下面200px 左邊到0 這個(gè)區(qū)域的我們裁剪出來 */ 
}

右邊類似只是裁剪位置改了

.right{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid lightblue;
    position:absolute;
    top: -10px;  /* 10的原因是因?yàn)檫吙蚴?0個(gè)像素 */
    right: -10px;
    clip: rect(0 200px 200px 100px);  /* 位置更改,計(jì)算可以參考上圖 */ 
}

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            box-sizing: border-box;
        }
        .box{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: #ccc;
            border-radius: 50%;
            left: 40%;
            top: 200px;

        }
        .num{
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            border-radius: 50%;
            width: 180px; 
            height: 180px;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 180px;
            font-size: 32px;
        }
        
        
        .clip{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid #ccc;
            border-radius: 50%;
            clip: rect(0, 200px, 200px, 100px);
        }
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid lightblue;
            border-radius: 50%;
            clip: rect(0 100px 200px 0);
            top: -10px;
            left: -10px;
        }
        .right{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid lightblue;
            border-radius: 50%;
            clip: rect(0 200px 200px 100px);
            top: -10px;
            left: -10px;
        }
        .width-none{
            width: 0;
        }
        .auto{
            clip: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="clip">
            <div class="left"></div>
            <div class="right width-none"></div>
        </div>
        <div class="num">

        </div>
    </div>
    <script >
        let clip = document.querySelector('.clip'),
        left = document.querySelector('.left'),
        right = document.querySelector('.right'),
        num = document.querySelector('.num'),
        rotate = 0;
    
        let loop = setInterval(() => {
            if(rotate >= 100){
                rotate = 0;
                right.classList.add('width-none');
                clip.classList.remove('auto');
            } else if(rotate > 50){
                right.classList.remove('width-none');
                clip.classList.add('auto');
            }
            rotate++;
            left.style.transform = 'rotate('+ 3.6*rotate + 'deg)';
            num.innerHTML = `${rotate}%`
        },100)

    </script>
</body>
</html>

簡單說下上面的代碼

1啤斗、首先隱藏了右半圓表箭,這是因?yàn)槲覀冃枰D(zhuǎn)的是左半圓,我們可以等左半圓轉(zhuǎn)到右邊圓的位置再顯示右 邊钮莲,就是等到旋轉(zhuǎn)到180度的時(shí)候免钻。

2、同時(shí)我們看到主圓添加了clip: rect(0, 200px, 200px, 100px);裁剪樣式崔拥,這是因?yàn)槟J(rèn)我們 進(jìn)度是0%的极舔,我們只顯示右邊的話才能隱藏左邊,但是我們右邊不是隱藏的嗎链瓦?那顯示它干嘛呢拆魏,因?yàn)? 旋轉(zhuǎn)左邊的時(shí)候就看到轉(zhuǎn)到右邊的圓了。稍微有點(diǎn)繞慈俯,請結(jié)合代碼稽揭,多多理解

3、等到左邊旋轉(zhuǎn)了180我們需要將右邊顯示出來肥卡,并且將box元素的裁剪設(shè)置為默認(rèn)值,就是不裁剪事镣,這 這樣才能顯示完整的左右兩個(gè)圓步鉴。

4、最后我們使用js來控制旋轉(zhuǎn)角度并將百分比顯示在頁面上

寫在最后

如果上面的解釋看不明白璃哟,索性就不要看了氛琢,把代碼放在本地調(diào)試下,自己去理解随闪。

別鉆牛角尖阳似,代碼是最好的語言。

使用clip才實(shí)現(xiàn)圓環(huán)進(jìn)度還是很簡單的铐伴,還不需要考慮兼容性撮奏,關(guān)于clip可以看張鑫旭大神的日志

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末俏讹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子畜吊,更是在濱河造成了極大的恐慌泽疆,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件玲献,死亡現(xiàn)場離奇詭異殉疼,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)捌年,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進(jìn)店門瓢娜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人礼预,你說我怎么就攤上這事眠砾。” “怎么了逆瑞?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵荠藤,是天一觀的道長。 經(jīng)常有香客問我获高,道長哈肖,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任念秧,我火速辦了婚禮淤井,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘摊趾。我一直安慰自己币狠,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布砾层。 她就那樣靜靜地躺著漩绵,像睡著了一般烤惊。 火紅的嫁衣襯著肌膚如雪你雌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天箭昵,我揣著相機(jī)與錄音侨糟,去河邊找鬼碍扔。 笑死,一個(gè)胖子當(dāng)著我的面吹牛秕重,可吹牛的內(nèi)容都是我干的不同。 我是一名探鬼主播,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼二拐!你這毒婦竟也來了服鹅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤卓鹿,失蹤者是張志新(化名)和其女友劉穎菱魔,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吟孙,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡澜倦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杰妓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片藻治。...
    茶點(diǎn)故事閱讀 39,779評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖巷挥,靈堂內(nèi)的尸體忽然破棺而出桩卵,到底是詐尸還是另有隱情,我是刑警寧澤倍宾,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布雏节,位于F島的核電站,受9級(jí)特大地震影響高职,放射性物質(zhì)發(fā)生泄漏钩乍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一怔锌、第九天 我趴在偏房一處隱蔽的房頂上張望寥粹。 院中可真熱鬧,春花似錦埃元、人聲如沸涝涤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阔拳。三九已至,卻和暖如春类嗤,著一層夾襖步出監(jiān)牢的瞬間衫生,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工土浸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人彭羹。 一個(gè)月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓黄伊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親派殷。 傳聞我的和親對象是個(gè)殘疾皇子还最,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 概述 今天我們來探究一下android的樣式墓阀。其實(shí),幾乎所有的控件都可以使用 background屬性去引用自定義...
    CokeNello閱讀 4,831評論 1 19
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color拓轻,font斯撮,text-align,li...
    love2013閱讀 2,314評論 0 11
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,098評論 25 707
  • 樹形圖在生活中是最常用的扶叉,比如收拾房間勿锅,出門收拾行李,或在學(xué)習(xí)中分類總結(jié)枣氧,其效果總是很理想的溢十。希望把這...
    劍州福蘭閱讀 1,727評論 0 1
  • 我在這個(gè)世界上生活了十六年,如今我才即將高二达吞,就覺得好累张弛。或許是因?yàn)閷W(xué)習(xí)壓力酪劫,家庭壓力吞鸭,學(xué)校的壓力,亦或是同學(xué)間競...
    鹿梓閱讀 283評論 0 0