Termes CSS clés employés : border-radius, linear-gradient, radial-gradient, animation.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+, Safari5.1+ avec préfixe, Opera16+.
Combiner des images d'arrière-plan pour obtenir par animation des irisations hypnotiques.
Nous allons jouer ici sur des arrière-plans à dégradés radiants semi-transparents afin d'obtenir des combinaisons de couleurs, par superposition. En faisant varier différemment la taille des arrière-plans, nous obtiendrons des couleurs variant grandement.
Définissons d'abord les caractéristiques globales de l'élément.
div.iris {
width:200px;
height:200px;
border-radius:110px;
border:10px solid grey;
}
Puis définissons la taille et la position des images d'arrière-plan, ainsi que la couleur de fond, opaque.
...
background-size: 60px 60px;
background-position:top;
background-color: rgba(255,100,100,1);
}
La première image d'arrière-plan est un dégradé radial à deux composantes devant se répéter :
...
background-image:
repeating-radial-gradient(rgba(232,232,70,.6) 0px,
rgba(0,60,170,0) 60%) ;
}
Puis nous ajoutons un autre dégradé radial à trois composantes, également répété :
...,
repeating-radial-gradient(rgba(255,20,20,.3) 12%,
rgba(255,255,255,.4) 25%,
rgba(25,200,205,1) 24px);
}
Nous définissons enfin l'animation (via ici un :hover, mais l'animation pourrait être continue) :
div.iris:hover {
animation: iris 1.4s cubic-bezier(.1,.4,.9,.6) infinite;
}
@keyframes iris {
from { background-size: 60px 60px, 24px 24px; }
50% { background-size: 200px 200px, 100px 100px; }
to { background-size: 100px 100px, 150px 150px; }
}
Vous voyez ci-dessous les deux arrière-plans individuels, statiques, puis leur combinaison animée.
Vous pourriez bien sûr modifier les couleurs, la position des arrière-plans (j'ai choisi un alignement
en haut, mais essayez donc avec background-position:center;) ainsi que les paramètres de
l'animation. Attention toutefois : d'une part ces animations avec des éléments semi-transparents sont
assez gourmandes en temps de calcul, surtout sur des clients dépourvus de puce graphique à accélération
matèrielle, mais d'autre part elles peuvent être vite fatigantes à regarder. Conservez-les plutôt de
petite taille et n'en abusez pas sur un site !
|
|---|