純粋な CSS を使用して、React アイコンを回転させるアニメーション効果を実現します

この記事では、純粋な CSS を使用して React アイコンを回転させるアニメーション効果を実現する方法を段階的に説明します。皆さんのお役に立てれば幸いです。

##数日前、Xiaabao は

codepen で 剑气 の読み込み効果を確認しました。彼は非常に驚き、再び ## になりました。 . #CSS 感動しました。もともとみんなと協力して 剑气 ローディングを実現したいと思っていたのですが、Xiaobao が検索したところ、Xiao Lu さんがそれを達成していることがわかり、やめるのをやめました。 シャオバオは納得できる人物なのでしょうか？もちろん！

Xiao Bao は頭を悩ませ、非常に興味深いパターンを思いつきました。これは単純に Jianqi の

plus

バージョンです。

react Icon、すごいですね、これはSword Qiplusですよね？ react 小さなパッケージを動かそう*!

プロジェクト アドレス: 反応して動かしてみよう

https://zcxiaabao. github .io/zc-demos/display/reactMoveLoading/index.html

react アイコンの描画

react

このアイコンは誰もがよく知っているはずです。 3 つの同一のアイコンで構成され、楕円と中央の円で構成されます。楕円と円は、border-radius を使用して実装されます。

最初に 3 つの楕円と中心の円の構造を準備します

html

• <div class="react">
      <div class="electron"></div>
      <div class="electron-alpha"></div>
      <div class="electron-omega"></div>
  </div>

3 つの楕円は同じなので、一般的な円を書きます1 つの楕円スタイルで、3 つの重複する楕円が得られます。

• .react > [class^="electron"] {
      border: #5ed3f3 solid 2px;
      border-radius: 100%;
      width: 100%;
      /* CSS变量 --electron-orbit-size值为72px */
      height: var(--electron-orbit-size); 
  }

2 番目と 3 番目の楕円の傾斜角をそれぞれ

60deg
• と -60deg## に設定します #<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">.electron-alpha { transform: rotate(60deg); } .electron-omega { transform: rotate(-60deg); }</pre><div class="contentsignin">ログイン後にコピー</div></div>

react: before

疑似要素を使用して中心円を描画し、絶対配置を使用して中心円を中心に配置します。
• react アイコンの描画が完了しました。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.react:before { position: absolute; top: 50%; left: 50%; width: var(--nucleus-size); height: var(--nucleus-size); margin-top: calc(var(--nucleus-size) / -2); margin-left: calc(var(--nucleus-size) / -2); background: var(--electron-color-hex); } .react &gt; [class^=&quot;electron&quot;] { position: absolute; top: 50%; margin-top: calc(var(--electron-orbit-size) / -2); }</pre><div class="contentsignin">ログイン後にコピー</div></div>

反応アイコン アニメーション デザイン

日数は 50 日、Dao Yan は 49 歳、まだあります。欠けているかもしれない希望の光、それは特別な美しさを形づくるでしょう。

それでは、楕円の一部を削除して、クールでダイナミックな効果が得られるかどうかを確認してみましょう。

開始状態が

border-left

が欠落しており、その後

left、bottom、right、top の順序で欠落していると仮定します。アニメーション効果を見てください。 アニメーションを設定

electron-orbit

欠落しているエッジを順番に切り替えます
• <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">@keyframes electron-orbit { 0% { border-top: rgba(94, 211, 243, 1) solid 2px; border-right: rgba(94, 211, 243, 1) solid 2px; border-bottom: rgba(94, 211, 243, 1) solid 2px; border-left: rgba(94, 211, 243, 0) solid 2px; } 25% { border-top: rgba(94, 211, 243, 1) solid 2px; border-right: rgba(94, 211, 243, 1) solid 2px; border-bottom: rgba(94, 211, 243, 0) solid 2px; border-left: rgba(94, 211, 243, 1) solid 2px; } 50% { border-top: rgba(94, 211, 243, 1) solid 1px; border-right: rgba(94, 211, 243, 0) solid 2px; border-bottom: rgba(94, 211, 243, 1) solid 4px; border-left: rgba(94, 211, 243, 1) solid 2px; } 75% { border-top: rgba(94, 211, 243, 0) solid 2px; border-right: rgba(94, 211, 243, 1) solid 2px; border-bottom: rgba(94, 211, 243, 1) solid 2px; border-left: rgba(94, 211, 243, 1) solid 2px; } 100% { border-top: rgba(94, 211, 243, 1) solid 2px; border-right: rgba(94, 211, 243, 1) solid 2px; border-bottom: rgba(94, 211, 243, 1) solid 2px; border-left: rgba(94, 211, 243, 0) solid 2px; } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

アニメーションの全体的な効果は次のとおりです。まだ問題ありませんが、欠落している部分が 0 -> 1

であるため、透明度が変化しすぎて、アニメーション全体が一貫性を欠いてしまいます。

#ディスプレイ側の透明度をそれぞれ下げる

0.5 0.35 0.2 0

##透明度を下げた後、 the anime まとまり度はかなり良くなりましたが、線の質感が非常に悪いです 次に線の太さを修正していきます。

線の太さを変更します。太さのグラデーションは

4px 2px 1px 0px

3 つを使用します。楕円 同じアニメーションの開始時間が同じであるため、アニメーションのリズムは一定のままですが、少し硬く見えますが、楕円ごとに独自のアニメーション リズムを設定します。

各楕円にそれぞれ異なるアニメーション遅延時間を設定します

1.2s 1s 0.8s

#Add smallボールアニメーション

ラインアニメーションだけはまだ単調です。引き続き最適化を進め、欠落部分に小さなボールを追加します。欠落部分に合わせて小さなボールも動き、小さなボールもズームを伴います。事実上。

@keyframes electron {
  0% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  12.5% {
    top: 100%;
    transform: scale(1.5);
  }
  25% {
    left: 100%;
    transform: scale(1);
  }
  37.5% {
    top: 0%;
    transform: scale(0.25);
  }
  50% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  62.5% {
    top: 100%;
    transform: scale(1.5);
  }
  75% {
    left: 100%;
    transform: scale(1);
  }
  87.5% {
    top: 0%;
    transform: scale(0.25);
  }
  100% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
}

どうですか、何か完了したように見えますか? 心配しないでください。最後のステップが 1 つあります。アイコンを動かしましょう。

アイコンが移動します

回転、縮小、ズームのアニメーションをアイコン全体に追加して、最終的な

反応読み込み

エフェクト

@keyframes react {
  0% {
    transform: rotate(0deg) scale(1);
  }
  12.5% {
    transform: rotate(-45deg) scale(0.9);
  }
  25% {
    transform: rotate(-90deg) scale(1);
  }
  37.5% {
    transform: rotate(-135deg) scale(0.9);
  }
  50% {
    transform: rotate(-180deg) scale(1);
  }
  62.5% {
    transform: rotate(-225deg) scale(0.9);
  }
  75% {
    transform: rotate(-270deg) scale(1);
  }
  87.5% {
    transform: rotate(-315deg) scale(0.9);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

ソース コード ウェアハウス

ソース コード アドレス: React Moves

https://github.com/zcxiaabao/zc-demos/blob/main/display/reactMoveLoading /index .html

プロジェクトアドレス：react

https://zcxiaabao.github.io/zc-demos/display/reactMoveLoading/index.html

役立つと思われる場合は、小さなバッグを注文することを忘れないでください。

(学習ビデオ共有: css ビデオ チュートリアル )

以上が純粋な CSS を使用して、React アイコンを回転させるアニメーション効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。