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

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

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

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