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

CSS を使用した放射状グラデーションのアニメーション

問題:

放射状のグラデーションを作成したいと考えています。 div にグラデーションの「輝き」効果を適用し、白いハイライトを左から右にスムーズに移動させます。右。

解決策:

1. 2 倍のグラデーション サイズと 50% カラーストップ:

   作成div の 2 倍のサイズの放射状グラデーション。カラーストップを元の値の半分に設定します (例: 8% ではなく 4% など)。これにより、視覚的な外観が同じままになります。

2. グラデーション位置のアニメーション:

   キーフレーム アニメーションを使用して、background-position プロパティを操作します。右上に配置されたグラデーションから始めて、左上にアニメーション化します。アニメーションを交互に設定すると、方向が逆になります。

コード例:

#shine-div {
  height: 30vh;
  width: 60vw;
  margin: auto;
  border-radius: 10px;
  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;
  }
}

注:最遠隅の計算により、グラデーションは元の定義とまったく同じに表示されない可能性があります。

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