CSS3 to achieve dynamic background gradient effect

Learning CSS3 is more about getting familiar with new features and basic theories. This article uses a case study to help you understand some theoretical knowledge in CSS3 and summarizes some techniques to improve your development efficiency.

This case is (background color gradient), using CSS3 can achieve the effect of background color gradient;

HTML part:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Gradient - Skyline </title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div class="text">
      Gradient - Skyline</div>
</body>
</html>

To achieve background color gradient, you don’t need to do anything in the HTML (structure) part. Here is a line of text to facilitate the display effect;

CSS part:

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD); background-size: 400%;
  animation: start animation 15s infinite;
}

.text{
  color: white;
  text-align: center;
  text-transform:uppercase;
  margin: 400px 0;
  font-size: 22px;
}

@keyframes startimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

Key points:

Some of the content has been mentioned in the previous (water ripples): https://www.jb51.net/css/672226.html

background-image: linear-gradient（）；

The linear-gradient() function is used to create a linear gradient "image". To create a linear gradient, you need to set a starting point and a direction (specified as an angle) for the gradient to move. You also need to define the end color. The end color is what you want Gecko to transition to smoothly, and you must specify at least two, although you can specify more colors to create more complex gradient effects.

The "125deg" is used to set the gradient tilt angle;

background-position：

Property sets the starting position of the background image.

You can also try this wallpaper gradient:

background:white;
background-image: linear-gradient(90deg,
                  rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient( 
                  rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

Summarize

The above is the CSS3 that I introduced to you to achieve the dynamic gradient effect of the background. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: 4 principles for clean and beautiful web design

>>: About the IE label LI text wrapping problem