Home > Article > Web Front-end > 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>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%;
}
}The effect is as shown:
Points:
background-image: linear-gradient（）；
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：
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;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!