使用CSS clip 属性实现音频播放圆环进度条

使用CSS clip 属性实现音频播放圆环进度条_第1张图片
这是效果

突然有需求要做一个圆环的音频播放进度条(上图效果),自己琢磨尝试了半天,也没有实现。最后度娘一下,才知道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地址

最后,有啥我没说清楚或者说错了的,欢迎大家留言,大家一起学习,共同进步么。

你可能感兴趣的:(使用CSS clip 属性实现音频播放圆环进度条)