How to achieve dynamic gradient effect of web page background in css-CSS Tutorial-php.cn

How to achieve dynamic gradient effect of web page background in css

王林

Release： 2020-04-16 09:14:08

forward

3366 people have browsed it

How to achieve dynamic gradient effect of web page background in css

HTML part:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> 渐变——天际线</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div>
      渐变——天际线
    </div>
</body>
</html>

Copy after login

No need to do any operation in the HTML (structure) part to achieve background color gradient. A line of text is added here to facilitate the display effect;

(Recommended tutorial: CSS tutorial)

CSS part:

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

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

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

Copy after login

The effect is as shown:

How to achieve dynamic gradient effect of web page background in css

Points:

 background-image: linear-gradient（）；

Copy after login

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

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

background-position：

Copy after login

attribute sets the starting position of the background image.

You can also try this kind of tablecloth 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;

Copy after login

Recommended video tutorial: css video tutorial

The above is the detailed content of How to achieve dynamic gradient effect of web page background in css. For more information, please follow other related articles on the PHP Chinese website!