Comment ajouter un effet de changement de couleur dynamique à l'image d'arrière-plan en CSS3

Dans l'article précédent "Utilisez CSS3 pour créer une image d'arrière-plan triangulaire sympa", nous vous avons présenté une méthode de création d'une image d'arrière-plan triangulaire sympa. Les amis intéressés peuvent en apprendre davantage ~

Et l'article suivant Laissez-moi vous présenter. à une méthode de création d'images d'arrière-plan sympas et vous montrera comment utiliser CSS3 pour créer des animations d'images d'arrière-plan aux couleurs changeantes afin de rendre vos pages Web plus attrayantes !

Jetons d'abord un coup d'œil aux rendus

Étudions comment obtenir cet effet :

D'abord, nous ne créons pas de balise, mais définissons l'image d'arrière-plan directement sur la balise body

body {
   background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Que diriez-vous de changer la couleur de l'image ? Cela nécessite l'ajout d'un calque de couleur en superposition sur l'image d'arrière-plan. Cela peut être réalisé en utilisant la fonction Linear-gradient() :

background-image: 
           linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
   url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");

Pour le moment, il s'agit toujours d'un effet statique. effet de couleurs qui changent constamment ? Nous pouvons utiliser des @keyframes et des attributs d'animation pour réaliser - ajouter des effets d'animation :

• Utilisez les attributs d'animation pour définir le nom de l'animation, la durée de lecture, les temps de lecture, etc. :
  

body {
  background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

animation-name : Spécifiez être lié au nom de l'image clé du sélecteur

animation-duration : l'animation spécifie le nombre de secondes ou de millisecondes nécessaires pour se terminer

animation-timing-function : définit la façon dont l'animation terminera un cycle

animation-delay : définit le intervalle de retard avant le début de l'animation.

animation-iteration-count : Définissez le nombre de fois que l'animation est jouée.

animation-direction : Précisez si l'animation doit être jouée à l'envers à tour de rôle.

animation-fill-mode : Spécifie le style à appliquer à l'élément lorsque l'animation n'est pas lue (lorsque l'animation est terminée ou lorsqu'il y a un délai avant que l'animation ne commence à jouer).

animation-play-state : Spécifie si l'animation est en cours d'exécution ou en pause.

• Utilisez @keyframes pour définir chaque image d'animation :

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), 
		url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
		 url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
}

Le code complet est donné ci-dessous :

La plateforme de sites Web chinois PHP propose de nombreuses ressources pédagogiques vidéo, tout le monde est invité à apprendre " tutoriel vidéo CSS" !

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!