前の記事では、CSS3 の 3 つのアニメーション プロパティ、transform、transition、animation を紹介しました。ただし、基本的な文法を理解できたとしても、優れたアニメーション効果をデザインできるわけではありません。デザインの道では学びに終わりはなく、才能も必要です。私もとても貧乏なので、優秀なデザイナーの肩の上に立って、いくつかの効果をシミュレーションすることしかできません。
インターネット上のデザインを参照しており、この記事では非常に一般的な読み込み効果を共有しています。こちらをクリックしてください
例 1: 菊の形の読み込みエフェクト
最初のステップは、静的な小さな菊を描くことです。
.sk-fading-circle { width: 40px; height: 40px; position: relative;}.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}.sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%;}<div class="sk-fading-circle"> <div class="sk-circle"></div> … //为缩减篇幅省略中间10个div <div class="sk-circle"></div></div>
コードは上記のとおりで、実際には、外側の div にネストされた 12 個の小さな div です。小さな div は、border-radius を使用して円の中に描画され、margin: 0 auto; を使用して上部グリッドの中心に配置されます。 12 個の小さな div は絶対に配置されているため、すべて重なり合っています。
2 番目のステップは、重なり合う 12 個の円を広げることです。
.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}… //节省篇幅,每个圆每隔30度递增旋转.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}<div class="sk-fading-circle"> <div class="sk-circle1 sk-circle"></div> … //为缩减篇幅省略中间10个div <div class="sk-circle12sk-circle"></div></div>
コードは上記のとおりです。transform の回転を使用して各ドットを回転させ、完全な菊の形を形成します。変換に慣れていない場合は、2 番目のドットが 30 度回転する様子を見てください。
3 番目のステップは、アニメーションを通じて不透明度属性を制御して、各ポイントがフェードインおよびフェードアウトするようにすることです
@-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; }}@keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } }.sk-fading-circle .sk-circle:before { …… animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;}
により、各ポイントが点滅します信号灯のように同期します。
最後のステップは、各ポイントのアニメーション遅延を設定して、点滅時間をずらし、一般的な菊の回転効果を形成することです
.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }… //为缩减篇幅省略中间代码.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }
ドットが 12 個あるため、点滅間隔は各ドットは 0.1 秒であるため、最初のドットにはアニメーション遅延がなく、すぐに点滅します。 2 番目のドットは -1.1 秒から点滅し始めます (負の数がわからない場合は、アニメーションの記事を参照してください。つまり、この時点から開始され、前のアニメーション効果は表示されません)。その後、各ドットは 0.1 秒ずつ遅延します。最後に、一般的な菊回しローディング効果が形成されます
例 2: iOS 版の菊ローディング
原理を理解した後は何もありません作例以上に 1を元に、ドットを縦棒に変更し、不透明度を半透明にします。ソースコードはサンプルページでご自身で確認できます
例 3: 楽譜バージョン 読み込み中、エフェクトについてはここをクリックしてください
最初ステップは静的なものを描画することです。 楽譜は非常にシンプルで、外側の div の中にいくつかの隣り合った div が埋め込まれているだけです。
.spinner { height: 40px;}.spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block;}<div class="spinner"> <div></div> … //你可以根据需求多加几个div <div></div></div>
2 番目のステップは楽譜を移動することです
.spinner > div { …… animation: sk-stretchdelay 1.2s infinite ease-in-out;}@keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1.0); }}
例 1 と 2 では、transform の回転を使用して回転を実装しています。例 3 では、transform のscaleY を使用してストレッチを実現します。
最後のステップは、各キーが異なる時間でストレッチするように遅延を設定することです
.spinner .rect2 { animation-delay: -1.1s; }.spinner .rect3 { animation-delay: -1.0s; }.spinner .rect4 { animation-delay: -0.9s; }.spinner .rect5 { animation-delay: -0.8s; }<div class="spinner"> <div class="rect1"></div> … //为节省篇幅省略中间代码 <div class="rect5"></div></div>
各キーのストレッチ 間隔時間は 0.1 秒なので、最初のキーにはアニメーション遅延がなく、すぐに引き伸ばされます。 2 番目のキーは -1.1 秒から点滅し始めます。次に、各キーが 0.1 秒単位の速度でストレッチされます。菊の装填の原理は同じなので、詳細は説明しません。
例 4: Loading の簡易版
原理を理解した後は、例 3 に基づいて原点へのキーを変更し、色を変更するだけです。サンプル ページでソース コードを自分で確認できます。
他にも読み込みサンプルがあります。cssload など、インターネット上に優れたサンプルがたくさんあります。ただし、Loading のアニメーション効果はせいぜい軽食程度にしか考えられません。CSS3 アニメーション プロパティの可能性を最大限に活用して、より魅力的な効果を作成できます。