CSS实现圆形进度条

时间：2023-03-30 18:57:22 CSS

示例图的结构首先设置一个父div的相对定位，父div包含四个半圆div和一个用于遮蔽的小圆div。实现步骤首先编写基本的html结构

添加样式到父div和content.box{position:relative;}.content{top:10px;左：10px；宽度：100px；高度：100px；边界半径：50%；位置：绝对；背景：红色；z-index:5;}当前效果：添加第一个背景半圆.bg1{position:absolute;宽度：60px；高度：120px；边界半径：120px00120px；z-指数：3；background:sandybrown;}添加第二个背景semicircle.bg2{left:60px;位置：绝对；宽度：60px；高度：120px；边框半径：0px120px120px0；z-索引：1；background:sandybrown;}添加第一个进度半圆。这时候去调整旋转角度的页面可以看到旋转的进度。pr1{位置：绝对；左：60px；宽度：60px；高度：120px；边框半径：0px120px120px0px；z-指数：2；背景：forestgreen；变换：腐烂吃了（-180度）；transform-origin:0px60px;}添加第二个半圆，第一个半圆只能旋转到50%，所以需要第二个半圆来完成剩下的一半。pr2{位置：绝对;左：60px；边框半径：0px120px120px0px；z-指数：4；背景：forestgreen；变换：旋转（-180度）；transform-origin:0px60px;}添加动画功能，单独添加动画功能在.pr1和.pr2中，实际需要可以用js控制两个进度半圆的旋转角度.pr1{...animation:pr1A5sinfinite线性前向；}.pr2{...动画：pr2A5??s无限线性前向；}@keyframespr1A{0%{变换：旋转（-180deg）；}50%{变换：旋转（0度）；}100%{变换：旋转（0度）；}}@keyframespr2A{0%{变换：旋转（-180deg）；}100%{宽度：60px；高度：120px；变换：旋转（180度）；}}以上完成

上一篇：csstext

下一篇：厌倦了编写活动页面？快来获取页面构建器吧！

CSS实现圆形进度条相关文章