CSS3とSVGを使用して、Circular Progress Barアニメーション効果を作成します

CSS3とSVGを使用して、Circular Progress Barアニメーション効果を作成できます。手順は次のとおりです。SVG要素を作成し、円形パスを定義します。円形のパスに点線スタイルを設定します。 CSS3アニメーションを使用して、破線のオフセットを制御します。破線の初期オフセットを調整して、進行状況率を設定します。

CSS3とSVGを使用して、Circular Progress Barアニメーションを作成します

Circular Progress Barアニメーション効果は、タスクの完了の進行状況または割合を示すシンプルで効果的な方法です。この効果は、CSS3とSVGを使用して簡単に作成できます。

ステップ：

1. SVG要素を作成します

Progress Barを含むSVG要素を作成します。 SVG要素では、進行状況バーに必要な半径を持つ円形パスを定義します。

 <code><svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke-width="10" fill="none"></circle> </svg></code>

2.円の点線スタイルを設定します

円形のパスに点線スタイルを設定すると、点線間隔は円の全長でなければなりません。ストロークダッシュアレイとストロークダッシュオフセットプロパティを使用して実装されています。

 <code>circle { stroke-dasharray: 251.32741228718345; stroke-dashoffset: 251.32741228718345; }</code>

3。CSS3アニメーションを使用します

CSS3アニメーションを使用して、円形の点線のオフセットを制御します。アニメーションの期間は、進行状況が完了するのに必要な時間に設定され、アニメーションフィルモードをフォワードに設定して、アニメーションが完了した後も進行状況が変わらないようにする必要があります。

 <code>@keyframes progress { to { stroke-dashoffset: 0; } } circle { animation: progress 5s forwards; }</code>

4.進捗率を設定します

ストロークダッシュオフセットの初期値を調整して、進行状況率を設定します。パーセントは等しい（進行の1〜パーセント） *周囲の全長。

 <code>circle { stroke-dashoffset: calc((1 - 0.5) * 251.32741228718345); }</code>

サンプルコード：

 <code>   <style> svg { width: 100; height: 100; } circle { stroke-width: 10; fill: none; stroke-dasharray: 251.32741228718345; stroke-dashoffset: 251.32741228718345; animation: progress 5s forwards; } @keyframes progress { to { stroke-dashoffset: 0; } } </style>   <svg> <circle cx="50" cy="50" r="40"></circle> </svg>  </code>

以上がCSS3とSVGを使用して、Circular Progress Barアニメーション効果を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。