通过 css mask 编写圆行进度条
warning:
这篇文章距离上次修改已过278天，其中的内容可能已经有所变动。
CSS Mask 属性可以用来创建各种各样的视觉效果，包括创建圆形进度条。但是，CSS Mask 属性的支持度不如 CSS Filter 属性广，因此可能不是实现此功能的最佳选择。
不过，如果你坚持要使用 CSS Mask 来实现这个功能，可以参考以下的代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
.progress-ring {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4db8ff 75%, transparent 0);
mask: linear-gradient(to right, #4db8ff 75%, transparent 0);
mask-size: 200% 200%;
animation: spin 2s linear infinite;
will-change: mask-position;
}
@keyframes spin {
to {
mask-position: 100%;
}
}
</style>
</head>
<body>
<div class="progress-ring"></div>
</body>
</html>这段代码创建了一个圆形的进度条，通过改变 mask-position 的值来控制进度。这里使用了 mask 属性来创建一个和容器同样大小的掩码，并且使用 conic-gradient 来创建一个圆锥渐变，从蓝色渐变到透明。通过动态改变 mask-position，我们可以实现进度条的进度效果。
但是，请注意，这种方法可能不是最佳实践，因为 CSS Mask 在不同的浏览器中的兼容性和性能可能不如 CSS 其他属性。如果你需要创建一个现代、兼容且高效的圆形进度条，你可能需要考虑使用 SVG 或者 canvas 来实现。
评论已关闭