使用CSS clip 屬性實現音頻播放圓環進度條

klivitamJ 發布于2019-08-29 12:29 / 2371人閱讀

摘要：突然有需求要做一個圓環的音頻播放進度條上圖效果，自己琢磨嘗試了半天，也沒有實現。然后結合讓這個半圓旋轉，就實現了內的進度條，當超過時，取消對的剪裁，再使用一個半圓來保存的進條，就實現一個的進度條效果。

??突然有需求要做一個圓環的音頻播放進度條（上圖效果），自己琢磨嘗試了半天，也沒有實現。最后度娘一下，才知道css還有一個clip屬性，完美實現需求。分享一下，說不定能幫其它小伙伴。至于有沒有用，那就不知道了，who care！OK，費話打住，Let"s go!

CSS clip 屬性

??先簡單了解一下css clip屬性

說明

clip 屬性剪裁絕對定位元素。這個屬性用于定義一個剪裁矩形。對于一個絕對定義元素，在這個矩形內的內容才可見。出了這個剪裁區域的內容會根據 overflow 的值來處理。

可能值

值	描述
shape	設置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)
auto	默認值。不應用任何剪裁。
inherit	規定應該從父元素繼承 clip 屬性的值。

來源 w3school

使用

??其實原理就是：通過剪裁使一個正方形div只顯示右半部分，再通過剪裁在這個div里做一個帶邊框（邊框大小就是進度條的大小）的左半圓，因為div只顯示右半部分，正好將這個半圓剪裁掉了也就看不到了。然后結合rotate讓這個半圓旋轉，就實現了50%內的進度條，當超過50%時，取消對div的剪裁，再使用一個半圓來保存50%的進條，就實現一個100%的進度條效果。貼上代碼，然后再對關鍵代碼用注釋解釋。

/*Css部分*/
.circleProgress_wrapper{/*設置圓環的大小*/
    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;/*設置進度條大小和顏色值*/
    border-radius: 50%;
    clip: rect(0,100px,200px,0);/*top:0,right:100,bottom:200,left:0裁剪出左半部*/
}
.slice.gt50 .fill{/*當進度超過50%時，讓fill旋轉180度填充50%*/
    transform: rotate(180deg);
}

//javscript部分

??完整的Demo,這里用了我寫一個audioPlayPlugin.js,對audio標簽的常用操作進行了一些簡單的封裝。github地址,coding地址

??最后，有啥我沒說清楚或者說錯了的，歡迎大家留言，大家一起學習，共同進步么。

云服務器 GPU云服務器圓環進度條播放器進度條進度條實現代碼進度條實現原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111926.html

使用CSS clip 屬性實現音頻播放圓環進度條

摘要：突然有需求要做一個圓環的音頻播放進度條上圖效果，自己琢磨嘗試了半天，也沒有實現。然后結合讓這個半圓旋轉，就實現了內的進度條，當超過時，取消對的剪裁，再使用一個半圓來保存的進條，就實現一個的進度條效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); ??突然有需求要做一個圓環的音頻播放...

kuangcaibao 2019-08-20 16:03 評論0 收藏0
使用CSS clip 屬性實現音頻播放圓環進度條

摘要：突然有需求要做一個圓環的音頻播放進度條上圖效果，自己琢磨嘗試了半天，也沒有實現。然后結合讓這個半圓旋轉，就實現了內的進度條，當超過時，取消對的剪裁，再使用一個半圓來保存的進條，就實現一個的進度條效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); ??突然有需求要做一個圓環的音頻播放...

rubyshen 2019-08-01 16:43 評論0 收藏0
CSS clip 屬性深入

摘要：之前的工作中有用到過這個屬性。作用是這么說的屬性剪裁絕對定位元素。唯一合法的形狀值是默認值。規定應該從父元素繼承屬性的值。所以顯示的部分應該就是左下角四分之一區域。使用屬性實現音頻播放圓環進度條 ??之前的工作中有用到過clip這個屬性。最近工作又再次用到這個屬性時，發現自己忘了怎么設置這個屬性值的了。看來上次沒有真的弄懂這個屬性，又去查了查文檔學習了一下。這里簡單分享，同時加深一下映...

zhouzhou 2019-08-30 13:49 評論0 收藏0
css3 制作圓環進度條

摘要：引子移動端做一個加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。引子移動端做一個 loadiing 加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 CSS3 實現圓環 demo 剛開始寫這個圓環的時候是參照帖子上給出的css代碼代入，然后根據自己的需求改，發現圓環可以完美轉動了，但是好像沒...

xingpingz 2019-08-01 18:28 評論0 收藏0