Maison > interface Web > tutoriel CSS > le corps du texte

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
3309 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!

Étiquettes associées:
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal