CSS を使用して単純な読み込みエフェクトを実装する方法

フロントエンド開発では、読み込みは非常に一般的な機能です。 Web ページのデータがロードされるときに、待機中にユーザーに視覚的なフィードバックを提供して、ユーザー エクスペリエンスを向上させたいと考えています。この記事では、CSS を使用して簡単な読み込みエフェクトを実装します。

1. アニメーション アニメーションを使用して読み込みを実装する

アニメーションは CSS3 の新しいモジュールで、非常に複雑なアニメーション効果を作成するために使用できます。ここではアニメーションを使用してローディング効果を作成します。

まず、HTML で読み込みエフェクトのコンテナを追加します。

<div class="loading">
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
</div>

次に、「円」を回転させるためのキーフレーム アニメーションを CSS で定義します。

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

次に、 .loading-circle クラスのスタイルを設定して円にし、その中で上で定義したアニメーションを使用します。

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

最後に、コンテナがページの中央に配置されるように .css-loading でコンテナのスタイルを設定し、「円」の位置とサイズを適切に調整します。

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

完全な実装コードは次のとおりです:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

2. トランジションを使用して読み込みを実装します

アニメーションに加えて、CSS でトランジションを使用して、エフェクトを読み込み中。

また、Loading の表示領域として HTML にコンテナーを追加します。

<div class="loading-2">
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
</div>

CSS で、.loading-circle-2 クラスの初期状態と最終状態を定義します。また、Transition を使用して状態間のスムーズな移行を実現します。

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

最後に、.loading-2 要素にスタイルを設定して、ページの中央に配置します。

完全な実装コードは次のとおりです:

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. 概要

この記事では、CSS を使用して 2 つの異なる方法で読み込み効果を実現する方法を示します。アニメーションは比較的複雑ですが、非常に豊かで多様なアニメーション効果を作成できます。トランジションはより簡潔で理解しやすくなり、いくつかの単純なアニメーションを実現できます。

一般に、CSS を使用して読み込みを実装するのは比較的簡単な方法であり、ユーザー エクスペリエンスを効果的に向上させることができます。もちろん、実際の開発では、プロジェクトの実際のニーズに基づいて調整やスタイルの最適化を行う必要がある場合もあります。

以上がCSS を使用して単純な読み込みエフェクトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。