css3 utilise l'attribut d'animation pour obtenir l'effet de dégradé dynamique de couleur d'arrière-plan (code ci-joint)

Si la couleur d'arrière-plan sur le site Web est relativement unique, elle ne sera pas assez belle. Alors, comment rendre la couleur d'arrière-plan modifiable ? Cet article vous expliquera comment utiliser l'animation CSS3 pour changer progressivement la couleur d'arrière-plan, ajuster la combinaison de couleur et d'ordre et rendre la conception des couleurs plus accrocheuse.

Sans plus tarder, jetons un œil au contenu spécifique (cours recommandé : tutoriel vidéo CSS3)

Tout d'abord, jetons un œil à Animation d'images clés CSS3 Les bases

Commençons par des animations qui changent progressivement les éléments ! Dans les propriétés d'animation CSS 3, vous pouvez définir des images clés et dessiner un mouvement détaillé. Concernant l'heure et le timing des animations et des boucles infinies, seul le CSS peut être spécifié !

Que sont les images clés ?

Les images clés (points de passage) sont des images qui définissent les changements dans l'animation. Nous @keyframes définissons comment l'élément change avec chaque image clé. Pour qu'une animation corresponde à ses images clés, vous devez faire correspondre le nom de la règle @keyframes avec le nom de l'attribut animation-name spécifié pour l'élément.

Le nom de la règle @keyframes est déclaré comme " @keyframes + any name ". J'écrirai les informations sur les images clés de 0 % à 100 %. 0% indique le début de l'animation et 100% indique l'heure de fin. 0 % de, 100 % peut être remplacé par to. L'exemple ci-dessous est une image clé qui change la couleur d'arrière-plan du rouge à l'orange puis au rose.

@keyframes name {
  0% { background: red; }
  50% { background: orange; }
  100% { background: pink; }
}

Remarque : pour les navigateurs WebKit tels que Chrome et Safari, le préfixe du fournisseur (-webkit-) est requis. Écrivez " -webkit-keyframes " tel qu'écrit et écrivez -webkit- entre @ et l'image clé.

Attributs liés à l'animation

animation-name (nom de l'animation)

Le nom défini dans la spécification @keyframes. Si cela n’est pas précisé, aucune animation ne sera réalisée. De plus, si le nom de l'animation spécifié ne correspond à aucune image clé, l'image clé ne sera pas exécutée.

animation-duration (durée de l'animation)

Spécifiez la durée d'exécution d'une animation via "secondes + s". Par exemple, « 5 secondes » dure 5 secondes. Si 0, il ne sera pas exécuté. Même si une valeur négative est spécifiée, elle sera traitée comme 0.

animation-timing-function (fonction de synchronisation d'animation)

Spécifiez le timing de l'animation et comment continuer. Vous pouvez exprimer un mouvement fluide en augmentant la vitesse de progression de l'animation.

facilité (valeur initiale)

facilité d'entrée

facilité de sortie

facilité d'entrée-sortie

linéaire

animation-delay (délai d'animation)

Lors de la lecture d'un élément, précisez l'heure de "début de l'animation" à partir de "numéro d'élément + s". Par exemple, « 5 secondes » dure 5 secondes. Une valeur initiale de 0 s'exécutera immédiatement.

animation-iteration-count (nombre d'itérations d'animation)

Spécifie le nombre de fois où répéter l'animation à l'aide d'un nombre. Pour spécifier une boucle infinie, spécifiez infini.

animation-direction

Spécifie la direction de l'animation répétitive.

normal ...joue dans le sens normal (valeur initiale)

alterné ...régénère les temps impairs dans le sens opposé aux temps normaux et pairs (retour et retour...)

inverser... jouer à l'envers

alterner-inverser...lire à l'envers

animation-play-state (état de lecture d'animation)

Spécifiez l'animation en pause (en pause) et en lecture (en cours d'exécution). Cependant, il ne semble pas être beaucoup utilisé.

animation-fill-mode (mode de remplissage d'animation)

Spécifie l'état avant et après la lecture de l'animation.

aucun (par défaut)

en avant.. Conserver l'état de la dernière image clé après la lecture

en arrière... Appliquer l'état de la première image clé avant de jouer <. 🎜>

les deux… vers l'avant ...s'applique à la fois vers l'avant et vers l'arrière

Résumé de la propriété

La propriété d'animation vous permet de spécifier chaque valeur d'attribut individuellement, séparées par espaces. L'élément peut être omis, mais le nom de l'animation doit être écrit avant l'exécution. Il est recommandé de les lister dans l'ordre suivant.

animation-name (nom de l'animation)

animation-duration (durée de l'animation)

animation-timing-function (fonction de synchronisation de l'animation)

animation - delay (délai d'animation)

animation-iteration-count (nombre d'itérations d'animation)

animation-direction (direction d'animation)

animation-fill-mode (mode de remplissage d'animation)

animation-play-state (état de lecture d'animation)

body {
  animation: test 5s ease 1s infinite forwards;
}

Jetons un coup d'œil au contenu spécifique du changement de couleur d'arrière-plan

Après avoir compris les connaissances de base, examinons en détail la méthode de mise en œuvre spécifique. Tout d'abord, définissez le nom de l'image clé sur "bg - color" et définissez la couleur d'arrière-plan sur la transition de 0 à 100 %. Si vous définissez la même couleur sur 0 % et 100 %, elle se déplacera en douceur lors de la boucle de l'animation. Nous décrirons également la version que vous activez pour les navigateurs basés sur Webkit.

@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

Étant donné que la couleur d'arrière-plan de toute la page Web est spécifiée à ce moment-là, le corps est spécifié avec des attributs d'animation. Les valeurs sont "nom de l'image clé", bg-color "change" est ajouté en 10 secondes, ",10s" spécifie une boucle infinie infinie. N'oubliez pas la version webkit. background-color nous permet de spécifier une couleur d'arrière-plan de base comme couleur d'arrière-plan, nous préparant ainsi aux situations dans lesquelles l'animation ne fonctionne pas.

body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}

Le code complet est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
p {
  font-family: Meiryo, "Hiragino Kaku Gothic Pro W3",sans-serif;
  text-align: center;
  margin-top: 150px;
  color: #fff;
}
</style>
</head>
<body>
<p>php中文网</p>
</body>
</html>

效果如下：

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!