首先，在创建一个基本的 HTML 结构时，我们通常会定义一个 container 元素，并在其内部嵌套两个同心圆元素（例如 div），分别代表背景层和前景层：
html
<div class="circle-progress">
<div class="background-circle"></div>
<div class="foreground-circle"></div>
</div>
接下来是关键性的样式设定部分，我们将主要通过 `border-radius` 属性来构建完美的圆形以及运用 `transform-origin`, `animation` 等属性进行旋转以达到动效展示的目的。
1、设置基础样式：为 `.circle-progress` 及其内含子元素赋予合适的宽高并用 border-radius 形成完全圆形；
css
.circle-progress,
.background-circle,
.foreground-circle {
width: 200px;
height: 200px;
position: relative;
}
.background-circle,
.foreground-circle {
background-color: #ccc; /* 调整为你想要的基础颜色 */
border-radius: 50%;
}
2、制作静态圆环：
对于背景圆圈我们可以直接完成，而对于需要显示百分比变化的前景圆，则可以通过改变宽度 (`width`) 或者高度(`height`) 来模拟填充过程:
css
.foreground-circle {
overflow: hidden;
border-top-width: 40px; /* 圆环厚度可自定 */
&::before {
content: "";
display: block;
padding-bottom: 100%; /* 维持正方形比例以便形成完整圆形 */
background-color: dodgerblue; /* 填充色 */
animation-duration: inherit; /* 动画持续时间可通过变量控制 */
}
}
若要生成静态的效果，只需指定具体的宽度值即可展现特定阶段的圆环状态。
3、打造动态圆环效应:
为了使圆环产生流动感，我们需要借助 @keyframes 规则制定动画帧序列，对`.foreground-circle:before` 进行动态调整。以下是一个简单的顺时针填充分段式动画的例子：
css
@keyframes rotateCircle {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg); /* 根据实际需求调整最终转角角度 */
}
}
.foreground_circle {
animation-name: rotateCircle;
animation-timing-function: linear; /* 控制速度曲线，默认匀速转动 */
animation-iteration-count: infinite; /* 设置无限循环播放动画 */
}
至此，我们就成功地仅依靠纯 CSS3 完成了动态或静态圆环特效的设计与实现。这样的技术不仅让页面更具吸引力，还提升了用户体验，同时也展现了现代 Web 开发工具的强大功能及其灵活性。当然，你还可以在此基础上进一步优化和完善细节，比如添加过渡延迟、变换速度等功能，使其更加符合你的项目所需场景和风格要求。
标签： css3圆环代码
