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 <. 🎜>

Résumé de la propriété

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

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

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

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