带有部分完成指示的 CSS 进度圆
简介：
圆形进度条是一个用于指示进度或完成状态的通用 UI 元素。然而，许多 CSS 进度条显示达到 100% 的完整动画。本文演示了如何创建一个可以在特定百分比停止的 CSS 进度圈，如下图所示：
[部分完成的圆形进度条截图]
解决方案:
为了实现这一点，我们利用 CSS 剪辑和动画。 Clip 属性用于隐藏进度圆的一部分，而animation 属性则定义圆的旋转。
CSS 代码：
.wrapper {
width: 100px;
height: 100px;
position: absolute;
clip: rect(0px, 100px, 100px, 50px);
}
.circle {
width: 80px;
height: 80px;
border: 10px solid green;
border-radius: 50px;
position: absolute;
clip: rect(0px, 50px, 100px, 0px);
}
div[data-anim~=base] {
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function:linear;
}
.wrapper[data-anim~=wrapper] {
-webkit-animation-duration: 0.01s;
-webkit-animation-delay: 3s;
-webkit-animation-name: close-wrapper;
}
.circle[data-anim~=left] {
-webkit-animation-duration: 6s;
-webkit-animation-name: left-spin;
}
.circle[data-anim~=right] {
-webkit-animation-duration: 3s;
-webkit-animation-name: right-spin;
}
@-webkit-keyframes right-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
}
}
@-webkit-keyframes left-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes close-wrapper {
to {
clip: rect(auto, auto, auto, auto);
}
}HTML 代码：
<div class="wrapper" data-anim="base wrapper"> <div class="circle" data-anim="base left"></div> <div class="circle" data-anim="base right"></div> </div>
此解决方案可确保进度圈动画流畅，并且能够根据需要以特定百分比暂停。
以上是如何创建一个在特定百分比处停止的 CSS 进度圈？的详细内容。更多信息请关注PHP中文网其他相关文章！
