突然有需求要做一個圓環的音訊播放進度條（上圖效果），自己琢磨嘗試了半天，也沒有實現。最後度娘一下，才知道css還有一個clip屬性，完美實現需求。分享一下，說不定能幫其它小夥伴。至於有沒有用，那就不知道了，who care！ OK，費話打住，Let's go!
CSS clip 屬性
# 先簡單了解css clip屬性
說明
#clip 屬性剪裁絕對定位元素。這個屬性用來定義一個剪裁矩形。對於一個絕對定義元素，在這個矩形內的內容才可見。出了這個剪裁區域的內容會根據 overflow 的值來處理。
shape 設定元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)
auto 預設值。不應用任何剪裁。
inherit 規定應該從父元素繼承 clip 屬性的值。
使用
其實原理就是：透過剪裁使一個正方形p只顯示右半部分，再透過剪裁在這個p裡做一個帶邊框（邊框大小就是進度條的大小）的左半圓，因為p只顯示右半部分，正好將這個半圓剪掉了也就看不到了。然後結合rotate讓這個半圓旋轉，就實現了50%內的進度條，當超過50%時，取消對p的剪裁，再使用一個半圓來保存50%的進條，就實現一個100%的進度條效果。貼上程式碼，然後再對關鍵程式碼用註解解釋。
/*Css部分*/
.circleProgress_wrapper{/*设置圆环的大小*/
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
cursor: pointer;
}
.slice{ /*这是一个裁去了左半部分，只显示右半部分的p*/
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%*/
trans
for
m: rotate(180deg);
}
<!--html 部分 -->
<p class="circleProgress_wrapper">
<p id="slice_wrapper" class="slice">
<p class="bar pre50"></p>
<p class="fill"></p>
</p>
</p>
//javscript部分
<script type="text/
javascript
" src="src/audioPlayPlugin.
js
"></script>
<script>
var bar=
document
.querySelector(".slice>.bar"),
process=0,
circleProgress=document.querySelector(".circleProgress_wrapper"),
slice=document.getElementById("slice_wrapper");
var audio=
new
audioController({ //创建一个音频
对象
src:"
file
/test1.mp3",
"
time
up
date
":function(){//监听timeupdate
事件
，也就是音频当前播放进度发生改变响应的事件
/*
*audio.getAttr("
current
Time" 获取当前播放的时间 s
*audio.getAttr("duration") 获取音频时长
*它们的比正好就是当前播放进度
*再乘以360转换为进度条应该旋转的角度
*/
process=audio.getAttr("currentTime")/audio.getAttr("duration")*360;
parseInt(process)===180&&add
Class
(slice,"gt50");//当等于50%时，使用fill占满50%的进度条
bar.style="transform:rotate("+(process)+"deg)";//根据播放进度设置
更新
进度条
}
}
});
circleProgress.addEvent
List
ener("click",function(){ //点击播放
if(audio.getAttr("paused")){
audio.play()
}
else
{
audio.pause()
}
});
function addClass(element,className){/*添加类名，完整代码已省略*/
...
}
</script>完整的Demo,這裡用了我寫一個audioPlayPlugin.js,對audio標籤的常用操作進行了一些簡單的封裝。 github地址,coding地址
最後，有啥我沒說清楚或說錯了的，歡迎大家留言，大家一起學習，共同進步麼。
【相關推薦】
1. 特別推薦：「php程式設計師工具箱」V0.1版本下載
2. 免費css線上影片教學
#以上是利用CSS clip 實現音訊播放圓環進度條教學實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
