css实现进度圆环

最新推荐文章于 2024-05-13 18:48:47 发布
最新推荐文章于 2024-05-13 18:48:47 发布
阅读量4.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38603437/article/details/91345663
版权

圆环实现原理

1.左边一个扇形+右边一个扇形组成一个圆环的圆圈

2.clip裁剪左扇形和右扇形，使其变为圆环形式

3.隐藏圆圈容器的左半边，只显示右半边，让左扇形向右开始逐步旋转，通过转动左扇形，隐藏右扇形，使左扇形旋转到右边显示，从而展现圆环进度50%以内的视觉效果

4.当左扇形旋转回左边后，右边出现空缺，所以需要显示右扇形显示在右边替补空缺的右边部分，最后让旋转回左边的左扇形显示需要显示的部分，从而程序百分之50之后的进度圆环视觉效果

原文博客

https://my.oschina.net/conqueror/blog/727713

git源代码

https://github.com/aa1312296679/CSSArcPercent

 

 

 

前端_小柒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯css3实现任意角度扇形，圆形进度条动画及类似操作
weixin_43017935的博客
04-19 2012
完全自己写的，代码质量不大好，可直接运行测试。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" box="width=device-width, initial-scale=1.0"> <meta http...
css实现圆圈进度
qq_41588568的博客
08-18 733
参考文章链接：https://my.oschina.net/conqueror/blog/727713，在自己的需求上做了一下改变。 效果图： html： <div class="circle col-md-2" style="background: #91DBF2;"> <div class="pie_left"><div class="left" style="background: #23B7E5;"></div></div&.
css扇形圆环进度条,CSS3实现圆环进度条
weixin_34312809的博客
08-03 634
Html:50%var num = parseInt($(".proportion").html())*3.6;if(num<180){$(".left").css("transform","rotate(" + num + "deg)");}else{$(".left").css("transform","rotate(180deg)");$(".right").css("transfor...
CSS环形进度条
最新发布
L_Y_J_21的博客
05-13 329
【代码】CSS环形进度条。
CSS之如何绘制任意角度的扇形
lumot的博客
09-14 505
扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果 <html> <head> <meta charset="UTF-8"> ...
android源生进度条,如何使用源生css3实现圆环加载进度条
weixin_30218733的博客
05-31 151
这次给大家带来如何使用源生css3实现圆环加载进度条，使用源生css3实现圆环加载进度条的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了，还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码：Docume...
圆环百分比进度
H_yelin的博客
09-03 646
通过css3组装成透明的圆环，可以用于展示百分比进度等，效果如下 圆环除了环的颜色外，其它全为透明transparent，天蓝色为html背景色。 思路大致如下： 圆环整体块包裹，里面有中间的比值显示块，还有左右两侧的进度块 左右两侧的进度块分三层： 第一层用于定位环的位置（此处遮挡超出部分，overflow:hidden） 第二层用于环的角度旋转（此处也要遮挡超出，同上，另外左右侧的旋转中心需要设置） 第三层则是纯粹的完全圆环（使用mas...
css实现圆环进度条动效
W_Venus的博客
03-28 590
css实现圆环进度条动效 记录一下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /&gt...
CSS实现圆环旋转加载动画
09-24
主要介绍了CSS实现圆环旋转加载动画，一个圆环表示加载进度，像一个时钟顺时针旋转一圈，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css3 clip实现圆环进度条的示例代码
09-24
这可以通过JavaScript或CSS动画实现，从而达到动态显示进度的效果。 整个代码示例包含一个`.box`类，它是一个具有圆角的灰色背景，用来放置圆环进度条。`.num`类用于在中心显示进度数值，可以调整样式以适应不同的...
uniapp插件：基于CSS实现的进度环.zip
01-23
uniapp uniapp插件：基于CSS实现的进度环.zip
CSS3实现圆形进度条
01-23
主要利用CSS实现的非常美观的圆形进度条，但是也有小部分JS逻辑控制，非常的简单，创意十足！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
css3实现wifi信号逐渐增强效果实例
09-24
以下是一些关键的CSS3概念和技术，它们在实现这个实例中起着至关重要的作用： 1. **动画（Animations）**：CSS3动画允许我们定义元素在一段时间内的状态变化，通过`@keyframes`规则来创建。在这个实例中，`run1`、`...
[CSS技巧] 剪辑路径
wuzhangting的博客
08-23 176
剪辑路径（Clip Path）是一种 CSS 技术，用于创建非矩形的图形剪辑区域。它可以将元素裁剪为不同的形状，如圆形、椭圆形、多边形或自定义路径。这为我们创造各种有趣和独特的设计效果提供了可能性。需要注意的是，剪辑路径的兼容性可能受到限制，特别是在旧版浏览器上。为确保广泛的兼容性，建议提供备用的剪辑路径方案，如使用背景图像或 SVG 剪辑路径。这只是一些基本示例，实际上你可以使用更复杂的路径来创建更精细的剪辑效果。属性中使用不同的函数、单位和值来调整剪辑路径的形状和位置。
css3绘制环形_css画圆，如何用纯css实现一个动态画圆环效
weixin_34096605的博客
02-15 931
展开全部给你一62616964757a686964616fe78988e69d8331333365653761个例子：html>css动画*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}:root,html,body{font-family:'PoiretOne','OpenSans','H...
CSS实现圆环进度条
热门推荐
时光清浅处，一步一安然
07-18 1万+
该例子是写的固定的进度，你们也可以根据自己的需求变换。首先，我们先看一个静态进度条。其实和静态的是一样的。
css 实现圆环进度条
快乐是一切的博客
11-26 6177
先上图，最后的效果是这样 主要的思路是 使用锥形渐变给div一个背景，然后使用mask遮挡中间部分，这样就变成一个圆环了，最后用 before和after处理一下 圆环进度开始和结束位置。 html <div class="shadow"></div> css .shadow { width: 100px; height: 100px; display: relative; border-radius: 50%; background: conic-gradient
用css画圆，半圆，扇形
deartors的博客
02-03 316
【代码】用css画圆，半圆，扇形。
【css】如何实现环形进度条
weixin_33682719的博客
08-15 899
　　最近团队的童鞋接到了一个有关环形进度条的需求，想要还原一个native的沿环轨迹渐变进度条的效果，看到这个效果的时候，笔者陷入了沉思。。 　　环形进度条的效果，最先想到的就是使用CSS利用两个半圆的hack来模拟实现的： <div class='circle-container'> <div class="circle-item"> ...
css3实现圆环百分比进度
06-11
可以使用CSS3中的transform和animation属性来实现圆环百分比进度的效果，具体步骤如下： 1. 创建一个圆环的基本样式，设置圆环的宽度、颜色和边框样式： ``` .progress { width: 100px; height: 100px; border: 10px solid #eee; border-radius: 50%; position: relative; } .progress:before { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #ccc; position: absolute; top: 0; left: 0; } ``` 2. 使用transform属性将圆环旋转90度，使起点从顶部开始： ``` .progress:before { transform: rotate(-90deg); } ``` 3. 使用animation属性设置动画效果，将圆环的进度从0%到指定百分比： ``` .progress:after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #000; position: absolute; top: 0; left: 0; transform: rotate(-90deg); animation: progress 2s ease-out forwards; } @keyframes progress { from { transform: rotate(-90deg); } to { transform: rotate(calc(-90deg + (360 * 80 / 100))); } } ``` 其中，animation属性中的forwards参数表示动画结束后保持最后一帧状态，calc函数用来计算旋转角度。 4. 在HTML中添加进度条的容器，并设置对应的百分比： ``` <div class="progress" data-progress="80"></div> ``` 5. 使用JavaScript获取进度条容器和其对应的百分比，将百分比值设置为圆环的进度： ``` const progress = document.querySelector('.progress'); const percent = progress.getAttribute('data-progress'); progress.style.setProperty('--progress', `${percent}%`); ``` 6. 最后，在CSS中使用var函数获取JavaScript设置的进度值，并将其应用到圆环的进度样式中： ``` .progress:after { transform: rotate(calc(-90deg + (360 * var(--progress) / 100))); } ``` 这样就可以实现一个简单的圆环百分比进度条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值