CSS アニメーション: 要素のフラッシュ効果を実現する方法

CSS アニメーション: 要素のフラッシュ効果を実現する方法、具体的なコード例が必要です。

Web デザインでは、アニメーション効果が優れたユーザー エクスペリエンスをもたらすことがあります。ページにグリッター効果は、要素をより目を引くようにできる一般的なアニメーション効果です。 CSSを使って要素のフラッシュ効果を実現する方法を紹介します。

1. flash の基本的な実装

まず、CSS のアニメーション プロパティを使用してフラッシュ効果を実現する必要があります。アニメーションプロパティの値には、アニメーション名、アニメーション実行時間、アニメーション遅延時間、アニメーション実行方法、アニメーション実行時間を指定する必要があります。フラッシュ効果については、無限ループアニメーションとして指定できます。

次に、要素のスタイルを指定する必要があります。グリッター効果では要素自体の色を変更する必要があるため、CSS の currentColor プロパティを使用して、要素の現在のテキストの色をグリッターの色として取得できます。セレクターを使用して要素のスタイルをフラッシュ効果から分離することもできるため、コントロールのスタイルとアニメーションを分離できます。

以下は簡単なサンプル コードです:

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 1rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 currentColor;
  }
}

/* 应用闪光动画 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
  opacity: 0;
}

上記のスタイル コードでは、要素をスタイル設定するために .shine という名前のクラスを定義します。アニメーションを定義するときは、@keyframes ルールを使用して Shining という名前のアニメーションを定義し、点滅効果を実現する 3 つのキーフレームを設定します。

次に、 pseudo-class::before を使用して、絶対に配置された透明レイヤーを要素に追加し、そのレイヤーにキラキラ効果のアニメーションを適用します。

2. 互換性に関する考慮事項

上記のコードは Flash 効果を実現できますが、コードはすべてのブラウザーと互換性があるわけではありません。 caniuse.com によると、box-shadow プロパティと currentColor プロパティの両方に互換性の問題があります。

この問題を解決するには、上記のコードにいくつかの変更を加えることができます。まず、box-shadow プロパティを透明な背景画像に置き換えることができます。次に、CSS の rgba() 関数を使用して、フラッシュの色と透明度を制御できます。

次は、変更されたサンプル コードです。

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 应用闪光动画 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

上記の変更されたコードでは、box-shadow 属性の代わりに、background-color 属性と opacity 属性を使用します。 Flash アニメーションを定義するときは、rgba() 関数を使用して色と透明度を設定します。このようにして、最新のすべてのブラウザにグリッター効果を実装できます。

3. その他の最適化

次に、コードにいくつかの最適化を加えます。たとえば、Web ページのパフォーマンスを向上させるために、ページが最初に読み込まれるときにアニメーション効果の実行を無効にすることができます。 CSS の will-change プロパティを使用して、アニメーション再生中のレンダリング パフォーマンスを高速化することもできます。

以下は、最適化されたコードの例です:

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 优化样式 */
.shine::before {
  will-change: opacity, background-color;
}

/* 禁用闪光动画在载入时立即执行 */
.shine:not(:hover)::before {
  animation-play-state: paused;
}

/* 开启闪光动画 */
.shine:hover::before {
  animation-play-state: running;
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

上記の変更されたコードでは、CSS の will-change プロパティを使用して、要素のレンダリングを最適化するようにブラウザーに指示します。ページの読み込み時にアニメーション効果がすぐに実行されないようにするには、animation-play-state 属性を使用して初期の一時停止状態を設定します。最後に、マウスが要素の上に移動すると、:hover 疑似クラスを使用してフラッシュ アニメーションをオンにし、アニメーション属性値を輝かせるように設定します。

概要

上記のサンプル コードを通じて、CSS を使用して要素のフラッシュ効果を実現する方法を確認できます。この効果により、Web デザインに優れたユーザー エクスペリエンスをもたらすことができます。この効果を実現するには、コードの互換性とパフォーマンスに注意を払う必要があります。練習中に問題が発生した場合は、コードの最適化を試みたり、他の解決策を試したりすることができます。

以上がCSS アニメーション: 要素のフラッシュ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。