Comment puis-je créer des animations d'arrière-plan à dégradé fluide en CSS sans utiliser de bibliothèques externes ?

Animation fluide d'arrière-plans dégradés avec CSS

Si vous rencontrez des problèmes avec des animations dégradées saccadées, où elles changent brusquement au lieu d'une transition en douceur, cet article fournira une solution sans recourir à des bibliothèques externes comme jQuery.

Animation Défis

Lorsqu'il s'agit d'animations en dégradé, il peut être difficile d'obtenir des transitions fluides entre plusieurs couleurs. Le comportement de l'animation par défaut est souvent brusque, ce qui fait passer le dégradé d'une position à une autre.

Arrière-plan dégradé linéaire

Pour créer une animation de dégradé fluide, nous utiliserons un arrière-plan dégradé linéaire et utilisez des animations CSS pour déplacer la position de l'arrière-plan. Notre style CSS ressemblera à ceci :

#gradient {
  /* Gradient background properties */
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(
    130deg,
    #ff7e00,
    #ffffff,
    #5cff00
  );
  background-size: 200% 200%;

  /* Animation properties */
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

Implémentation HTML

Dans le HTML, nous devons créer un élément div et appliquer la classe "gradient" :

<div>

En manipulant la position de l'arrière-plan à l'aide d'animations CSS, nous pouvons créer une animation de dégradé fluide. Cette approche élimine les sauts brusques et aboutit à une transition douce et progressive entre les couleurs.

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!