?

Programmation / Webdesign

Tutoriels > Programmation / Webdesign

  • Fond dynamique en css3

Fond dynamique en css3

léger et simple à mettre en place

Voici un petit bout de code sans prétention pour vous montrer comment je fais l'effet de changement de couleur de fond sur la home de mon site tout simplement en CSS 3
Dans un premier temps on va créer une page toute simple en html

HTML

<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
	// ici on copie colle le code CSS ci dessous !!!
	</style>
</head>
<body class="changecoul">
	<h1>Ma page change de couleur toute seule</h1>
</body>
</html>

Puis on va rédiger la feuille de style en créant une animation via le @keyframes que l'on apliquera sur la classe .changecoul de notre <body>

CSS

/*on creer la transition pour le changement de couleur */

@keyframes changecolor {
  0% {background-color:#D3C8DB}/* à 0% de l'animation on aura la couleur #D3C8DB */
  14.2% {background-color:#B6BFDE}/* à 0% de l'animation on aura la couleur #B6BFDE*/
  28.4% {background-color:#DCF0F5}/* à 0% de l'animation on aura la couleur #DCF0F5*/
  42.6% {background-color:#E4EED3}/* à 0% de l'animation on aura la couleur #E4EED3*/
  56.8% {background-color:#FCE2AA}/* à 0% de l'animation on aura la couleur #FCE2AA*/
  71% {background-color:#F9E3CF}/* à 0% de l'animation on aura la couleur #F9E3CF */
  85.2% {background-color:#FAD6D6}/* à 0% de l'animation on aura la couleur #FAD6D6*/
  100% {background-color:#D3C8DB}/* à 0% de l'animation on retourne à la 1er couleur */
}
/*attention de ne pas oublier de creer des @-webkit-keyframes pour la compatibilité avec certain navigateurs */
@-webkit-keyframes changecolor {
  0% {background-color:#D3C8DB}
  14.2% {background-color:#B6BFDE}
  28.4% {background-color:#DCF0F5}
  42.6% {background-color:#E4EED3}
  56.8% {background-color:#FCE2AA}
  71% {background-color:#F9E3CF}
  85.2% {background-color:#FAD6D6}
  100% {background-color:#D3C8DB}
}
/*on aplique la transition à la class voulu */

.changecoul{
	-webkit-animation: changecolor 20s normal infinite ease;
	-moz-animation: changecolor 20s normal infinite ease;
	-ms-animation: changecolor 20s normal infinite ease;
	animation: changecolor 20s normal infinite ease;
}
/*on aplique les autres styles de votre Css */
h1{
    text-align:center;
    font-size:30px;
  }

Explications 

la propriété "animation" permet d'appliquer une animation à une classe. le 1er paramètre et le nom de l'animation crée avec le @keyframes, il s'en suit les paramètres de l'animation :

class {
  animation:  <nom> <durée> <effet de timing> <délais> <répétition> <direction> <etat>;
}

Pour plus d'informations sur les animations je vous invite à vous rendre sur le site de alsacreations et de lire ce tuto