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

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

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

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

バージョンです。

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

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

react アイコンの描画

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

html

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

  ログイン後にコピー

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

  ログイン後にコピー

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 アイコンの描画が完了しました。 <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 の順序で欠落していると仮定します。アニメーション効果を見てください。 アニメーションを設定

欠落しているエッジを順番に切り替えます
• <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

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

4px 2px 1px 0px

1.2s 1s 0.8s

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

@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);
  }
}

アイコンが移動します

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

エフェクト

@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

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

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

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