How to add dynamic color changing effect to background image in CSS3

In the previous article "Using CSS3 to create a cool triangular background image", we introduced you to a method of creating a cool triangular background image. Interested friends can learn about it. ~

The following article will introduce you to a method of creating a cool background image, and let you know how to use CSS3 to create a color-changing background image animation to make your web page more attractive!

Let’s take a look at the renderings first

Let’s study how to achieve this effect:

First of all We do not create a tag, but directly set the background image on the body tag

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

How to change the color of the image? This requires adding a color layer as an overlay on the background image. This can be achieved using the linear-gradient() function:

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");

This is still static at this time Effect, how to achieve the dynamic effect of constantly changing colors? We can use @keyframes and animation attributes to achieve - add animation effects:

• Use animation attributes to set animation name, playback time, playback times, 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: Specify the name of the keyframe to be bound to the selector

animation-duration: The animation specifies how many seconds or milliseconds it takes to complete

animation-timing-function: Set how the animation will complete a cycle

animation-delay: Set the delay interval before the animation starts.

animation-iteration-count: Define the number of times the animation is played.

animation-direction: Specifies whether the animation should be played in reverse in turn.

animation-fill-mode: Specifies the style to be applied to the element when the animation does not play (when the animation is completed, or when the animation has a delay before starting to play).

animation-play-state: Specifies whether the animation is running or paused.

• Use @keyframes to define each frame of 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");
  }
}

The complete code is given below:

The PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css video tutorial"!

The above is the detailed content of How to add dynamic color changing effect to background image in CSS3. For more information, please follow other related articles on the PHP Chinese website!