資訊專欄INFORMATION COLUMN
摘要：突然有需求要做一個圓環(huán)的音頻播放進度條上圖效果，自己琢磨嘗試了半天，也沒有實現(xiàn)。然后結(jié)合讓這個半圓旋轉(zhuǎn)，就實現(xiàn)了內(nèi)的進度條，當超過時，取消對的剪裁，再使用一個半圓來保存的進條，就實現(xiàn)一個的進度條效果。
??突然有需求要做一個圓環(huán)的音頻播放進度條（上圖效果），自己琢磨嘗試了半天，也沒有實現(xiàn)。最后度娘一下，才知道css還有一個clip屬性，完美實現(xiàn)需求。分享一下，說不定能幫其它小伙伴。至于有沒有用，那就不知道了，who care！OK，費話打住，Let"s go!
CSS clip 屬性??先簡單了解一下css clip屬性
說明clip 屬性剪裁絕對定位元素。這個屬性用于定義一個剪裁矩形。對于一個絕對定義元素，在這個矩形內(nèi)的內(nèi)容才可見。出了這個剪裁區(qū)域的內(nèi)容會根據(jù) overflow 的值來處理。
可能值
| 值 | 描述 |
|---|---|
| shape | 設(shè)置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left) |
| auto | 默認值。不應(yīng)用任何剪裁。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 clip 屬性的值。 |
來源 w3school
使用??其實原理就是：通過剪裁使一個正方形div只顯示右半部分，再通過剪裁在這個div里做一個帶邊框（邊框大小就是進度條的大小）的左半圓，因為div只顯示右半部分，正好將這個半圓剪裁掉了也就看不到了。然后結(jié)合rotate讓這個半圓旋轉(zhuǎn)，就實現(xiàn)了50%內(nèi)的進度條，當超過50%時，取消對div的剪裁，再使用一個半圓來保存50%的進條，就實現(xiàn)一個100%的進度條效果。貼上代碼，然后再對關(guān)鍵代碼用注釋解釋。
/*Css部分*/
.circleProgress_wrapper{/*設(shè)置圓環(huán)的大小*/
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
cursor: pointer;
}
.slice{ /*這是一個裁去了左半部分，只顯示右半部分的div*/
position: absolute; /*必須是絕對定位元素，clip屬性才會有效*/
width: 100%;
height: 100%;
clip:rect(0,200px,200px,100px);/*top:0,right:200,bottom:200,left:100裁剪出右半部*/
}
.slice.gt50{/*當進度超過50%時，取消剪裁*/
clip:rect(auto,auto,auto,auto);
}
.bar,.fill{ /*兩個只顯示左半部分的半圓*/
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 4px rgba(255, 249, 0, 0.77) solid;/*設(shè)置進度條大小和顏色值*/
border-radius: 50%;
clip: rect(0,100px,200px,0);/*top:0,right:100,bottom:200,left:0裁剪出左半部*/
}
.slice.gt50 .fill{/*當進度超過50%時，讓fill旋轉(zhuǎn)180度填充50%*/
transform: rotate(180deg);
}
//javscript部分
??完整的Demo,這里用了我寫一個audioPlayPlugin.js,對audio標簽的常用操作進行了一些簡單的封裝。github地址,coding地址
??最后，有啥我沒說清楚或者說錯了的，歡迎大家留言，大家一起學習，共同進步么。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111926.html
摘要：突然有需求要做一個圓環(huán)的音頻播放進度條上圖效果，自己琢磨嘗試了半天，也沒有實現(xiàn)。然后結(jié)合讓這個半圓旋轉(zhuǎn)，就實現(xiàn)了內(nèi)的進度條，當超過時，取消對的剪裁，再使用一個半圓來保存的進條，就實現(xiàn)一個的進度條效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); ??突然有需求要做一個圓環(huán)的音頻播放...
摘要：突然有需求要做一個圓環(huán)的音頻播放進度條上圖效果，自己琢磨嘗試了半天，也沒有實現(xiàn)。然后結(jié)合讓這個半圓旋轉(zhuǎn)，就實現(xiàn)了內(nèi)的進度條，當超過時，取消對的剪裁，再使用一個半圓來保存的進條，就實現(xiàn)一個的進度條效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); ??突然有需求要做一個圓環(huán)的音頻播放...
摘要：之前的工作中有用到過這個屬性。作用是這么說的屬性剪裁絕對定位元素。唯一合法的形狀值是默認值。規(guī)定應(yīng)該從父元素繼承屬性的值。所以顯示的部分應(yīng)該就是左下角四分之一區(qū)域。使用屬性實現(xiàn)音頻播放圓環(huán)進度條 ??之前的工作中有用到過clip這個屬性。最近工作又再次用到這個屬性時，發(fā)現(xiàn)自己忘了怎么設(shè)置這個屬性值的了。看來上次沒有真的弄懂這個屬性，又去查了查文檔學習了一下。這里簡單分享，同時加深一下映...
摘要：引子移動端做一個加載的圖標，跟以往沿用的都不太一樣，是一個圓環(huán)進度條，圓環(huán)進度條也就罷了，還得能用百分比控制。 引子 移動端做一個 loadiing 加載的圖標，跟以往沿用的都不太一樣，是一個圓環(huán)進度條，圓環(huán)進度條也就罷了，還得能用百分比控制。 CSS3 實現(xiàn)圓環(huán) demo 剛開始寫這個圓環(huán)的時候是參照帖子上給出的css代碼代入，然后根據(jù)自己的需求改，發(fā)現(xiàn)圓環(huán)可以完美轉(zhuǎn)動了，但是好像沒...
閱讀 2623·2021-11-16 11:40
閱讀 3421·2021-11-08 13:26
閱讀 889·2021-10-28 09:32
閱讀 3545·2021-09-13 10:26
閱讀 816·2019-08-30 15:55
閱讀 791·2019-08-30 15:44
閱讀 1917·2019-08-30 15:44
閱讀 1764·2019-08-30 13:48
