資訊專欄INFORMATION COLUMN
摘要：突然有需求要做一個(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)度條效果。
??突然有需求要做一個(gè)圓環(huán)的音頻播放進(jìn)度條（上圖效果），自己琢磨嘗試了半天，也沒(méi)有實(shí)現(xiàn)。最后度娘一下，才知道css還有一個(gè)clip屬性，完美實(shí)現(xiàn)需求。分享一下，說(shuō)不定能幫其它小伙伴。至于有沒(méi)有用，那就不知道了，who care！OK，費(fèi)話打住，Let"s go!
CSS clip 屬性??先簡(jiǎn)單了解一下css clip屬性
說(shuō)明clip 屬性剪裁絕對(duì)定位元素。這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見(jiàn)。出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)根據(jù) overflow 的值來(lái)處理。
可能值
| 值 | 描述 |
|---|---|
| shape | 設(shè)置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left) |
| auto | 默認(rèn)值。不應(yīng)用任何剪裁。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 clip 屬性的值。 |
來(lái)源 w3school
使用??其實(shí)原理就是：通過(guò)剪裁使一個(gè)正方形div只顯示右半部分，再通過(guò)剪裁在這個(gè)div里做一個(gè)帶邊框（邊框大小就是進(jìn)度條的大?。┑淖蟀雸A，因?yàn)閐iv只顯示右半部分，正好將這個(gè)半圓剪裁掉了也就看不到了。然后結(jié)合rotate讓這個(gè)半圓旋轉(zhuǎn)，就實(shí)現(xiàn)了50%內(nèi)的進(jìn)度條，當(dāng)超過(guò)50%時(shí)，取消對(duì)div的剪裁，再使用一個(gè)半圓來(lái)保存50%的進(jìn)條，就實(shí)現(xiàn)一個(gè)100%的進(jìn)度條效果。貼上代碼，然后再對(duì)關(guān)鍵代碼用注釋解釋。
/*Css部分*/
.circleProgress_wrapper{/*設(shè)置圓環(huán)的大小*/
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
cursor: pointer;
}
.slice{ /*這是一個(gè)裁去了左半部分，只顯示右半部分的div*/
position: absolute; /*必須是絕對(duì)定位元素，clip屬性才會(huì)有效*/
width: 100%;
height: 100%;
clip:rect(0,200px,200px,100px);/*top:0,right:200,bottom:200,left:100裁剪出右半部*/
}
.slice.gt50{/*當(dāng)進(jìn)度超過(guò)50%時(shí)，取消剪裁*/
clip:rect(auto,auto,auto,auto);
}
.bar,.fill{ /*兩個(gè)只顯示左半部分的半圓*/
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 4px rgba(255, 249, 0, 0.77) solid;/*設(shè)置進(jìn)度條大小和顏色值*/
border-radius: 50%;
clip: rect(0,100px,200px,0);/*top:0,right:100,bottom:200,left:0裁剪出左半部*/
}
.slice.gt50 .fill{/*當(dāng)進(jìn)度超過(guò)50%時(shí)，讓fill旋轉(zhuǎn)180度填充50%*/
transform: rotate(180deg);
}
//javscript部分
??完整的Demo,這里用了我寫一個(gè)audioPlayPlugin.js,對(duì)audio標(biāo)簽的常用操作進(jìn)行了一些簡(jiǎn)單的封裝。github地址,coding地址
??最后，有啥我沒(méi)說(shuō)清楚或者說(shuō)錯(cuò)了的，歡迎大家留言，大家一起學(xué)習(xí)，共同進(jìn)步么。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50704.html
摘要：突然有需求要做一個(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)的音頻播放...
摘要：突然有需求要做一個(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)的音頻播放...
摘要：之前的工作中有用到過(guò)這個(gè)屬性。作用是這么說(shuō)的屬性剪裁絕對(duì)定位元素。唯一合法的形狀值是默認(rèn)值。規(guī)定應(yīng)該從父元素繼承屬性的值。所以顯示的部分應(yīng)該就是左下角四分之一區(qū)域。使用屬性實(shí)現(xiàn)音頻播放圓環(huán)進(jìn)度條 ??之前的工作中有用到過(guò)clip這個(gè)屬性。最近工作又再次用到這個(gè)屬性時(shí)，發(fā)現(xiàn)自己忘了怎么設(shè)置這個(gè)屬性值的了?？磥?lái)上次沒(méi)有真的弄懂這個(gè)屬性，又去查了查文檔學(xué)習(xí)了一下。這里簡(jiǎn)單分享，同時(shí)加深一下映...
摘要：引子移動(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 剛開始寫這個(gè)圓環(huán)的時(shí)候是參照帖子上給出的css代碼代入，然后根據(jù)自己的需求改，發(fā)現(xiàn)圓環(huán)可以完美轉(zhuǎn)動(dòng)了，但是好像沒(méi)...
閱讀 3855·2021-09-27 13:56
閱讀 891·2021-09-08 09:36
閱讀 777·2019-08-30 15:54
閱讀 619·2019-08-29 17:29
閱讀 940·2019-08-29 17:21
閱讀 1697·2019-08-29 16:59
閱讀 2773·2019-08-29 13:03
閱讀 2978·2019-08-29 12:47
