Comment puis-je animer un effet de brillance dégradé radial en CSS de gauche à droite ?

Animation de dégradés radiaux avec CSS

Problème :

Vous souhaitez créer un radial- effet de dégradé « brillance » sur un div et faire en sorte que la surbrillance blanche se déplace doucement de gauche à à droite.

Solution :

1. Taille du dégradé double et arrêts de couleur à 50 % :

   Créer un dégradé radial qui est deux fois la taille du div. Réglez les arrêts de couleur à la moitié de leurs valeurs d'origine (par exemple, 4 % au lieu de 8 %, etc.). Cela garantit que l'apparence visuelle reste la même.

2. Animer la position du dégradé :

   Utilisez une animation d'image clé pour manipuler la propriété background-position. En commençant par le dégradé positionné en haut à droite, animez-le en haut à gauche. En définissant l'animation sur alternative, elle inversera la direction.

Exemple de code :

#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;
  }
}

Remarque : En raison du calcul du coin le plus éloigné, le dégradé peut ne pas apparaître exactement comme la définition originale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!