ホームページ > 記事 > ウェブフロントエンド > CSS3 を使用して円形のプログレス バーを作成する方法の図
ドーナツ型の進行状況バーを作成する基本的なアイデアは、基本的な円弧の形状を描画し、CSS3 でその回転を制御して、基本的な形状を直列に接続し、部分的に消える効果を作成する方法を学びましょう。 CSS3 を使用して図で円を作成します。進行状況バーの形を整える方法
まず、誰かが円形の進行状況バー効果を作成できるかどうか尋ねた場合、それが静的な完全な円形の進行状況バーであれば、それは非常に簡単です:
.circleprogress{ width: 160px; height: 160px; border:20px solid red; border-radius: 50%; }
すると、彼らはこう言うでしょう、これはとても簡単です。しかし、それが完全な円でない場合はどうなるでしょうか?それについて考えた後:
.circleprogress{ width: 160px; height: 160px; border:20px solid red; border-left:20px solid transparent; border-bottom:20px solid transparent; border-radius: 50%; }
それから私はまだ言いました、これは難しいことではありません。しかし、すべてが 45 度の倍数ではない場合はどうなるでしょうか?
OK、最初に 200x200 の正方形を設定してから、ここで効果を完成させましょう:
.circleProgress_wrapper{ width: 200px; height: 200px; margin: 50px auto; position: relative; border:1px solid #ddd; }
次に、このコンテナにさらに 2 つの長方形を配置します。各長方形は半分を占めます:
<p class="circleProgress_wrapper"> <p class="wrapper right"> <p class="circleProgress rightcircle"></p> </p> <p class="wrapper left"> <p class="circleProgress leftcircle"></p> </p> </p>rree
ここでは、重要な役割を果たすラッパーのoverflow:hidden;に焦点を当てます。どちらの四角形にもオーバーフロー非表示が設定されているため、四角形の内側で円を回転させると、オーバーフロー部分が非表示になり、目的の効果を得ることができます。
左右の長方形の中に円があることもHTML構造から分かりました。まず右の半円について話しましょう:
.wrapper{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; } .rightright{ rightright:0; } .left{ left:0; }
効果が出ていることがわかります。実は元々は半円弧だったのですが、上下の境界線を設定したため、上の境界線の半分がはみ出して隠れてしまったので、回転させることで元に戻すことができます。必要なものを回転させるだけです。角度は任意の比率のプログレスバーを実現できます。次に、左の半円弧を実現し、それを完全な円にします:
.circleProgress{ width: 160px; height: 160px; border:20px solid transparent; border-radius: 50%; position: absolute; top:0; } .rightcircle{ border-top:20px solid green; border-right:20px solid green; rightright:0; }
それでは、原理は次のようになります。まず、右の半円弧を180度回転させます。次に、左の半円を 180 度回転します。このようにして、オーバーフローにより 2 つの半円が消え、プログレス バーが再びスクロールしたように見えます。必要なのは、角度を調整することで逆の効果を達成することです:
.circleProgress{ width: 160px; height: 160px; border:20px solid transparent; border-radius: 50%; position: absolute; top:0; -webkit-transform: rotate(45deg); }
さて、次のステップは、最初に見たように、最終的な効果に向けて進むことです。ゴミを掃除する 360 のガード もちろん、同様の効果はあまり似ていません:
.leftcircle{ border-bottom:20px solid green; border-left:20px solid green; left:0; }
ご覧のとおり、実際には、さまざまな境界線の色を変更するアニメーションがいくつかあるだけです。皆さんもこれを自分で練習してみてください。 重要なのは、このような円形のプログレス バー効果を実現するために 2 つの長方形を使用することです。重要な役割を果たすオーバーフロー ルールに特に注意してください。
以上がCSS3 を使用して円形のプログレス バーを作成する方法の図の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。