1

以下に示すように、経過時間を示す次の画像をアニメーション化する方法の解決策を探しています。説明をわかりやすくするために、アニメーションを 10% の間隔で実行したいと思います (67% の画像の例を示していますが)。実際には、メーターに表示される色付きのグラデーションが表示され、これらの部分でマスクが解除される可能性があります。異なる 10% の間隔で、色付きのグラデーションをより多く表示します。<div>CSS3 変換を使用して、ある種のマスキング手法を使用できますか? この画像は PhotoShop のさまざまなレイヤーにあるので、要素を操作することは間違いなく可能です。これを行うにはどうすればよいですか？

これは、67% 完了したときの様子です。
ここに画像の説明を入力

..そして 100% 完了:
ここに画像の説明を入力

4

1 に答える 1

3

いくつかの方法があります。

最近最もよく使われているのは JS とキャンバスですが、純粋な CSS3 メソッドもあります。投稿するこれらはすべて完全な円を使用しますが、あなたの場合は、ベースとして使用して、必要に応じて編集できます。

JS/キャンバス:

CSS3:

その他の結果については、「css ラジアル プログレス バー」をググってください。

于 2013-06-04T17:45:13.920 に答える