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

rubyshen 发布于2019-08-01 16:43 / 1465人阅读

摘要：突然有需求要做一个圆环的音频播放进度条上图效果，自己琢磨尝试了半天，也没有实现。然后结合让这个半圆旋转，就实现了内的进度条，当超过时，取消对的剪裁，再使用一个半圆来保存的进条，就实现一个的进度条效果。

突然有需求要做一个圆环的音频播放进度条（上图效果），自己琢磨尝试了半天，也没有实现。最后度娘一下，才知道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云服务器圆环进度条播放器进度条进度条实现代码进度条实现原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50704.html

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

摘要：突然有需求要做一个圆环的音频播放进度条上图效果，自己琢磨尝试了半天，也没有实现。然后结合让这个半圆旋转，就实现了内的进度条，当超过时，取消对的剪裁，再使用一个半圆来保存的进条，就实现一个的进度条效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); 突然有需求要做一个圆环的音频播放...

klivitamJ 2019-08-29 12:29 评论0 收藏0
使用CSS clip 属性实现音频播放圆环进度条

摘要：突然有需求要做一个圆环的音频播放进度条上图效果，自己琢磨尝试了半天，也没有实现。然后结合让这个半圆旋转，就实现了内的进度条，当超过时，取消对的剪裁，再使用一个半圆来保存的进条，就实现一个的进度条效果。 showImg(https://segmentfault.com/img/remote/1460000009182482?w=208&h=213); 突然有需求要做一个圆环的音频播放...

kuangcaibao 2019-08-20 16:03 评论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