成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

zhichangterry / 1042人閱讀

摘要：效果圖怎么實(shí)現(xiàn)這樣一個(gè)圓環(huán)進(jìn)度條的效果呢，可以使用等等方式，今天我們來(lái)說(shuō)下使用怎么來(lái)實(shí)現(xiàn)。使用才實(shí)現(xiàn)圓環(huán)進(jìn)度還是很簡(jiǎn)單的，還不需要考慮兼容性，關(guān)于可以看張?chǎng)涡翊笊竦娜罩?/p>

效果圖

怎么實(shí)現(xiàn)這樣一個(gè)圓環(huán)進(jìn)度條的效果呢，可以使用canvas、svg、GIF等等方式，今天我們來(lái)說(shuō)下使用css3怎么來(lái)實(shí)現(xiàn)。

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

圓環(huán)很簡(jiǎn)單，一行cssborder-radius:50%即可實(shí)現(xiàn)，而且沒(méi)有兼容性問(wèn)題，什么，你說(shuō)IE，讓它滾...

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

這里半圓環(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ū)域的我們裁剪出來(lái) */ 
}

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

.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ì)算可以參考上圖 */ 
}
完整代碼 



    
    
    
    Document

簡(jiǎn)單說(shuō)下上面的代碼

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)繞，請(qǐng)結(jié)合代碼，多多理解

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

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

寫在最后

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

別鉆牛角尖，代碼是最好的語(yǔ)言。

使用clip才實(shí)現(xiàn)圓環(huán)進(jìn)度還是很簡(jiǎn)單的，還不需要考慮兼容性，關(guān)于clip可以看[張?chǎng)涡翊笊竦娜罩綸

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

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

相關(guān)文章

  • 使用CSS clip 屬性實(shí)現(xiàn)音頻播放圓環(huán)進(jìn)度條

    摘要：突然有需求要做一個(gè)圓環(huán)的音頻播放進(jìn)度條上圖效果，自己琢磨嘗試了半天，也沒(méi)有實(shí)現(xiàn)。然后結(jié)合讓這個(gè)半圓旋轉(zhuǎn)，就實(shí)現(xiàn)了內(nèi)的進(jìn)度條，當(dāng)超過(guò)時(shí)，取消對(duì)的剪裁，再使用一個(gè)半圓來(lái)保存的進(jìn)條，就實(shí)現(xiàn)一個(gè)的進(jìn)度條效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); ??突然有需求要做一個(gè)圓環(huán)的音頻播放...

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

  • 使用CSS clip 屬性實(shí)現(xiàn)音頻播放圓環(huán)進(jìn)度條

    摘要：突然有需求要做一個(gè)圓環(huán)的音頻播放進(jìn)度條上圖效果，自己琢磨嘗試了半天，也沒(méi)有實(shí)現(xiàn)。然后結(jié)合讓這個(gè)半圓旋轉(zhuǎn)，就實(shí)現(xiàn)了內(nèi)的進(jìn)度條，當(dāng)超過(guò)時(shí)，取消對(duì)的剪裁，再使用一個(gè)半圓來(lái)保存的進(jìn)條，就實(shí)現(xiàn)一個(gè)的進(jìn)度條效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); ??突然有需求要做一個(gè)圓環(huán)的音頻播放...

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

  • 使用CSS clip 屬性實(shí)現(xiàn)音頻播放圓環(huán)進(jìn)度條

    摘要：突然有需求要做一個(gè)圓環(huán)的音頻播放進(jìn)度條上圖效果，自己琢磨嘗試了半天，也沒(méi)有實(shí)現(xiàn)。然后結(jié)合讓這個(gè)半圓旋轉(zhuǎn)，就實(shí)現(xiàn)了內(nèi)的進(jìn)度條，當(dāng)超過(guò)時(shí)，取消對(duì)的剪裁，再使用一個(gè)半圓來(lái)保存的進(jìn)條，就實(shí)現(xiàn)一個(gè)的進(jìn)度條效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); ??突然有需求要做一個(gè)圓環(huán)的音頻播放...

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

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

    摘要：效果圖怎么實(shí)現(xiàn)這樣一個(gè)圓環(huán)進(jìn)度條的效果呢，可以使用等等方式，今天我們來(lái)說(shuō)下使用怎么來(lái)實(shí)現(xiàn)。使用才實(shí)現(xiàn)圓環(huán)進(jìn)度還是很簡(jiǎn)單的，還不需要考慮兼容性，關(guān)于可以看張?chǎng)涡翊笊竦娜罩? 效果圖 showImg(https://segmentfault.com/img/bV3DbY?w=315&h=300); 怎么實(shí)現(xiàn)這樣一個(gè)圓環(huán)進(jìn)度條的效果呢，可以使用canvas、svg、GIF等等方式，今天我們來(lái)說(shuō)...

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

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

0條評(píng)論

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