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

資訊專欄INFORMATION COLUMN

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

zhichangterry / 1038人閱讀

摘要：效果圖怎么實(shí)現(xiàn)這樣一個(gè)圓環(huán)進(jìn)度條的效果呢，可以使用等等方式，今天我們來說下使用怎么來實(shí)現(xiàn)。使用才實(shí)現(xiàn)圓環(huán)進(jìn)度還是很簡單的，還不需要考慮兼容性，關(guān)于可以看張鑫旭大神的日志

效果圖

怎么實(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è)半的。大概畫了下圖

這里半圓環(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ì)算可以參考上圖 */ 
}
完整代碼 



    
    
    
    Document

簡單說下上面的代碼

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我們需要將右邊顯示出來，并且將box元素的裁剪設(shè)置為默認(rèn)值，就是不裁剪，這 這樣才能顯示完整的左右兩個(gè)圓。

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

寫在最后

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

別鉆牛角尖，代碼是最好的語言。

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

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

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

相關(guān)文章

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

    摘要：突然有需求要做一個(gè)圓環(huán)的音頻播放進(jìn)度條上圖效果，自己琢磨嘗試了半天，也沒有實(shí)現(xiàn)。然后結(jié)合讓這個(gè)半圓旋轉(zhuǎn)，就實(shí)現(xiàn)了內(nèi)的進(jìn)度條，當(dāng)超過時(shí)，取消對(duì)的剪裁，再使用一個(gè)半圓來保存的進(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)度條上圖效果，自己琢磨嘗試了半天，也沒有實(shí)現(xiàn)。然后結(jié)合讓這個(gè)半圓旋轉(zhuǎn)，就實(shí)現(xiàn)了內(nèi)的進(jìn)度條，當(dāng)超過時(shí)，取消對(duì)的剪裁，再使用一個(gè)半圓來保存的進(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)度條上圖效果，自己琢磨嘗試了半天，也沒有實(shí)現(xiàn)。然后結(jié)合讓這個(gè)半圓旋轉(zhuǎn)，就實(shí)現(xiàn)了內(nèi)的進(jìn)度條，當(dāng)超過時(shí)，取消對(duì)的剪裁，再使用一個(gè)半圓來保存的進(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)度條的效果呢，可以使用等等方式，今天我們來說下使用怎么來實(shí)現(xiàn)。使用才實(shí)現(xiàn)圓環(huán)進(jìn)度還是很簡單的，還不需要考慮兼容性，關(guān)于可以看張鑫旭大神的日志 效果圖 showImg(https://segmentfault.com/img/bV3DbY?w=315&h=300); 怎么實(shí)現(xiàn)這樣一個(gè)圓環(huán)進(jìn)度條的效果呢，可以使用canvas、svg、GIF等等方式，今天我們來說...

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

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

0條評(píng)論

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