Maison > interface Web > tutoriel CSS > Comment puis-je animer un effet de brillance dégradé radial en CSS de gauche à droite ?

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

Susan Sarandon
Libérer: 2024-11-28 22:19:12
original
975 Les gens l'ont consulté

How Can I Animate a Radial Gradient Shine Effect in CSS from Left to Right?

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;
  }
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal