css - 为自定义硬币滑块部分填充圆圈

Question

我想设计一个自定义硬币滑块，在通过特定硬币代表的特定范围的图像时，硬币的“填充”因子应该在 0 到 1 之间变化。假设范围是 10 个图像，我在第三张图片，它应该看起来像（填满的硬币代表之前已经遍历的范围，而靠近末尾的空硬币代表尚未触及的范围。从左边开始的第 6 个圆圈在这里很有趣）：

如何生成这样的圆形图像？有一些可用的 CSS 技巧吗？或者也许使用 HTML5 画布？

Answer 1

如果你想尽可能地使用 css，你可能想尝试设置一堆 10 个 div。如果您将边界半径设置为 50%，它们会得到圆形。然后您将所有这些设置为所选颜色的边框

如果您将前 6 个圆圈设置为特定类，并将背景颜色与该类相关联，则您将拥有实心圆圈。