ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して、React アイコンを回転させるアニメーション効果を実現します
この記事では、純粋な CSS を使用して React アイコンを回転させるアニメーション効果を実現する方法を段階的に説明します。皆さんのお役に立てれば幸いです。
##数日前、Xiaabao はcodepen で
剑气 の読み込み効果を確認しました。彼は非常に驚き、再び ## になりました。 . #CSS 感動しました。もともとみんなと協力して 剑气
ローディングを実現したいと思っていたのですが、Xiaobao が検索したところ、Xiao Lu さんがそれを達成していることがわかり、やめるのをやめました。 シャオバオは納得できる人物なのでしょうか?もちろん!
Xiao Bao は頭を悩ませ、非常に興味深いパターンを思いつきました。これは単純に Jianqi の
plus バージョンです。
react Icon、すごいですね、これはSword Qi
plusですよね? react
小さなパッケージを動かそう*!
reacthttps://zcxiaabao. github .io/zc-demos/display/reactMoveLoading/index.html
react アイコンの描画
このアイコンは誰もがよく知っているはずです。 3 つの同一のアイコンで構成され、楕円と中央の円で構成されます。楕円と円は、border-radius
を使用して実装されます。
<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## に設定します
#<pre class="brush:js;toolbar:false;">.electron-alpha {
transform: rotate(60deg);
}
.electron-omega {
transform: rotate(-60deg);
}</pre>
アイコンの描画が完了しました。
<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 > [class^="electron"] {
position: absolute;
top: 50%;
margin-top: calc(var(--electron-orbit-size) / -2);
}</pre>
反応アイコン アニメーション デザイン
開始状態がそれでは、楕円の一部を削除して、クールでダイナミックな効果が得られるかどうかを確認してみましょう。
border-left
が欠落しており、その後left、bottom、right、top の順序で欠落していると仮定します。アニメーション効果を見てください。
アニメーションを設定
<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>
アニメーションの全体的な効果は次のとおりです。まだ問題ありませんが、欠落している部分が 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); } }どうですか、何か完了したように見えますか? 心配しないでください。最後のステップが 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); } }
https://zcxiaabao.github.io/zc-demos/display/reactMoveLoading/index.htmlプロジェクトアドレス:react
役立つと思われる場合は、小さなバッグを注文することを忘れないでください。(学習ビデオ共有: css ビデオ チュートリアル )
以上が純粋な CSS を使用して、React アイコンを回転させるアニメーション効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。