円グラフを実装するための純粋な css3 anime_html/css_WEB-ITnose

注: このケースは CSS Scect から来ています

最初に効果を見てください:

必要な場合があります次の知識を習得するには

• CSS3 アニメーション
• 擬似要素
• グラデーションを作成しない場合は線形グラデーションを使用します
• currentColor (オプション)
• border-radius 'excel' 構文を使用する (オプション)

上記のオプションのタグは、コードの品質を追求しない場合や前処理ツールを使用しない場合でも、理解していなくても達成できることを意味します。それ。

HTML

実装は複雑ではありません。ここでは単一要素 + 疑似要素のみが使用されます。

<div class="pie"></div>

css

.pie { width: 100px; height: 100px; border-radius: 50%; background: #e85b92; background-image: linear-gradient(to right, transparent 50%, currentColor 0); color: #f2f3f4;}.pie::before { content: '';  display: block;  margin-left: 50%;  height: 100%;  border-radius: 0 100% 100% 0 / 50%;  background-color: inherit;  transform-origin: left;  animation: spin 3s linear infinite, bg 6s step-end infinite;}@keyframes spin {  to { transform: rotate(.5turn); }}@keyframes bg {  50% { background: currentColor; }}

キーコード

Gradient

background-image: linear-gradient(to right, transparent 50%, currentColor 0);

線形グラデーションは CSS3 で右へのグラデーション色を作成するプロパティであり、グラデーションが左から右であることを意味します。 ; 以下のパラメータはグラデーション色のリストです。

グラデーション カラー リストは、左から右に 1 つずつ表示されます。カラー値の後のパーセンテージまたはピクセル値は、グラデーションを開始するしきい値を示します。

私の理解は次のとおりです。前の色のしきい値が次の色のしきい値より小さい場合、このしきい値領域の間にグラデーションが発生し、逆に、前のしきい値が次のしきい値より大きい場合、グラデーションが発生します。グラデーションはなく、結合されていない領域は隣接するカラー値の単色で表示されます。

つまり、本来、円要素部分によって生成される効果は次のようなものです。

個人的には、linear-gradient を使用するのは少し面倒だと思います。 IE9 以下ではサポートされていないため (おそらく使用頻度が低いことに関係しています)、それを実現するために疑似要素を使用することを好みます。

.pie { width: 100px; height: 100px; border-radius: 50%; background: #e85b92; color: #f2f3f4; position: relative;}.pie::after { z-index: 1;  content: '';  display: block;  background: currentColor;  position: absolute;  left: 50%;  top: 0;  height: 100%;  border-radius: 0 100% 100% 0 / 50%;  width: 50%;  transform-origin: left;}.pie::before { content: '';  display: block;  z-index: 10;  position: absolute;  top: 0;  width: 50%;  left: 50%;  height: 100%;  border-radius: 0 100% 100% 0 / 50%;  background-color: inherit;;  transform-origin: left;  animation: spin 3s linear infinite, bg 6s step-end infinite;}

border-radius '例外' 構文

border-radius を削除して色の値を変更すると、効果は次のようになります。このように:

Animation

次に 2 つのアニメーションを追加します。1 つは 3 秒間の回転を担当し、もう 1 つは背景色の変更を担当します。 6 秒。接続は次のようになります。

CodePen

CodePen の Helkyle ( @HelKyle ) によるペン YqEJVo を参照してください。 >CSSアニメーションの学習を始めたらやってみよう css3を使っても同様の効果が得られましたが、「円グラフ」をどう実装するかという考え方に限定されていたために失敗に終わりました。したがって、固定された思考モードの外で考えると、別のことが得られる場合があります。

最近 CSS Scect の英語版を読んでいたのですが、CSS がこれほど柔軟に使用できるとは思いませんでした。一部の専門家がこう言ったのも不思議ではありません。「この本を読んだ後は、自分が CSS に堪能であるとはもう言えなくなりました。」

ちなみに、CSS Magic Brother がこの本を翻訳して、本棚に並べる準備ができています。楽しみにしています〜 (無料の広告...)