Maison >interface Web >tutoriel CSS >Comment obtenir un effet de dégradé dynamique de l'arrière-plan d'une page Web en CSS
Comment obtenir un effet de dégradé dynamique de l'arrière-plan d'une page Web en CSS
- 王林avant
- 2020-04-16 09:14:083363parcourir
Partie HTML :
<!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>Il n'est nécessaire de faire aucune opération dans la partie HTML (structure) pour obtenir un dégradé de couleur de fond. Une ligne de texte est ajoutée ici. pour faciliter l'effet d'affichage ;
(Tutoriel recommandé : Tutoriel CSS)
Partie CSS :
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%;
}
}L'effet est tel qu'illustré :
Points :
background-image: linear-gradient（）；
La fonction Linear-gradient() est utilisée pour créer une "image" d'un dégradé linéaire. Pour créer un dégradé linéaire, vous devez définir un point de départ et une direction (spécifiée sous forme d'angle) pour l'effet de dégradé. Vous devez également définir la couleur finale. La couleur d'arrêt est la transition douce que vous souhaitez que Gecko effectue, et vous devez en spécifier au moins deux, bien que vous puissiez spécifier plus de couleurs pour créer des effets de dégradé plus complexes.
Le "125deg" sert à définir l'angle d'inclinaison du dégradé ; l'attribut
background-position：
définit la position de départ de l'image d'arrière-plan.
Vous pouvez également essayer ce dégradé de papier peint :
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;Tutoriel vidéo recommandé : 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!