Comment obtenir un effet de dégradé dynamique de l'arrière-plan d'une page Web en CSS-tutoriel CSS-php.cn

Comment obtenir un effet de dégradé dynamique de l'arrière-plan d'une page Web en CSS

王林

Libérer： 2020-04-16 09:14:08

avant

3333 Les gens l'ont consulté

Comment obtenir un effet de dégradé dynamique de l'arrière-plan d'une page Web en CSS

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>

Copier après la connexion

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

Copier après la connexion

L'effet est tel qu'illustré :

Comment obtenir un effet de dégradé dynamique de larrière-plan dune page Web en CSS

Points :

 background-image: linear-gradient（）；

Copier après la connexion

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：

Copier après la connexion

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;

Copier après la connexion

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!