css - カスタム コイン スライダーの円を部分的に塗りつぶす

Question

特定のコインによって表される特定の範囲の画像を通過している間に、コインの「塗りつぶされた」係数が 0 から 1 まで変化するカスタム コイン スライダーを設計したいと考えています。範囲が 10 枚の画像の場合、 3 番目の画像は、次のようになります (塗りつぶされたコインは、既に通過した以前の範囲を表し、最後にある空のコインは、まだ触れられていない範囲を表します。左から 6 番目の円は、ここで興味深いものです):

このような円の画像を生成するにはどうすればよいですか? 利用可能な CSS トリックはありますか? それとも HTML5 キャンバスでしょうか?

Answer 1

できる限り CSS を使いたい場合は、10 個の div を設定してみてください。border-radius を 50% に設定すると、円になります。次に、選択した色の境界線をすべて設定します

最初の 6 つの円を特定のクラスに設定し、それに背景色を関連付けると、円が塗りつぶされます。