CSS で放射状のグラデーション シャイン エフェクトをアニメーション化するにはどうすればよいですか?

CSS で放射状グラデーションをアニメーション化する

CSS では、div 要素に放射状グラデーションの輝き効果を作成することがアニメーションによって実現できます。

二重グラデーションテクニック

白い輝きを左から右に滑らかにアニメーション化するには、ダブル グラデーション テクニックを使用します。これには、グラデーションのサイズを 2 倍にし、カラーストップの値を半分に減らすことが含まれます。これにより、左から右へのアニメーションを許可しながら、視覚的なグラデーションが変更されないことが保証されます。

方向性アニメーション

@keyframes を使用してグラデーションにアニメーションを適用し、背景をアニメーション化します。位置プロパティ。これにより、グラデーションの位置がアニメーション化され、動きと上から下への流れの錯覚が生まれます。

コード例

#shine-div {
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%,
                             #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) top
                            right/200% 200%;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position: top left;
  }
}

デモ

このコードは、放射状のグラデーションを持つ div 要素を作成し、左からの輝きをアニメーション化します。

<div><p>これらのテクニックを利用すると、希望の放射状のグラデーション シャイン エフェクトを実現し、左から右へスムーズにアニメーション化できます。</p></div>

以上がCSS で放射状のグラデーション シャイン エフェクトをアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。