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

Animation de dégradés radiaux en CSS

En CSS, la création d'un effet de brillance de dégradé radial sur un élément div peut être obtenue grâce à l'animation.

Technique du double dégradé

Pour animer en douceur l'éclat blanc de gauche à à droite, utilisez la technique du double dégradé. Cela implique de doubler la taille du dégradé et de réduire de moitié les valeurs des arrêts de couleur. Cela garantit que le dégradé visuel reste inchangé tout en permettant une animation de gauche à droite.

Animation directionnelle

Appliquez une animation au dégradé à l'aide de @keyframes et animez l'arrière-plan. propriété de position. Cela anime la position du dégradé, créant l'illusion de mouvement et s'écoulant de haut en bas.

Exemple de code

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

Démonstration

Ce code crée un élément div avec un dégradé radial et anime la brillance de gauche à droite, créant ainsi l'élément souhaité. effet.

<div>

En utilisant ces techniques, vous pouvez obtenir l'effet de brillance dégradé radial souhaité et l'animer en douceur de gauche à droite.

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!