CSS3で読み込みアニメーション効果を実装する方法

今日は、CSS3 を使用して読み込みアニメーション効果を作成する方法を説明します。アニメーション効果を作成するためにローディングを使用する必要があるのはなぜですか? 例を挙げてみましょう。これを読めば、すべての混乱が解消されると思います。

最初のステップは、静的な小さな菊を描くことです。

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 秒ずつ遅延します。最後に、一般的な菊の回転ローディング エフェクトが形成されます

このケーススタディを通じて、ローディングを使用してアニメーション エフェクトを作成する方法を完全にマスターできたと思います。さらにエキサイティングな内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

キャンバスを使用してボールとマウスの相互作用を実現する方法

キャンバスを使用してパーティクルファウンテンアニメーションの効果を作成する方法

css3 クリックして波紋効果を表示する

以上がCSS3で読み込みアニメーション効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。