CSS3 は読み込みアニメーション効果を実装します_html/css_WEB-ITnose

前の記事では、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 アニメーション プロパティの可能性を最大限に活用して、より魅力的な効果を作成できます。