Termes CSS clés employés : border-radius, radial-gradient.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+, Safari5.1+ avec préfixe, Opera16+.
Conférer un effet de pulsation à un bouton lorsqu’il est survolé par le pointeur.
Survolé par le pointeur, ça veut dire la pseudo-classe :hover. Un mouvement, ça sous-entend une animation.
Un code HTML élémentaire :
<IV class=conteneur>
<DIV class=bouton></DIV>
</DIV>
Dans le code CSS, commençons par l’élément conteneur. Comme nous voulons ici un bouton rond, nous employons la propriété border-radius, fixée à la moitié de la largeur de l’élément plus une bordure. La propriété overflow est fixée à hidden.
DIV.conteneur {margin : 5px auto 5px;
width:100px;
height:100px;
border: 4px solid grey;
border-radius:52px;
overflow:hidden;
}
Dans l’élément bouton de même taille, nous définissons un arrière-plan en dégradé rayonnant, de taille initiale 0. C’est ici un cercle rouge de 1% devenant blanc progressivement entre 80 et 100%. L’image n’est pas répétée et est centrée.
DIV.bouton {
width:100px;
height:100px;
border-radius:50px;
background-size: 0px 0px;
background-image: radial-gradient(circle, red 1%, red 80%, white 100%);
background-repeat:no-repeat;
background-position: center;
}
Puis nous définissons l’animation : une variation de la taille de l’image d’arrière plan de 0 pixels à 150% de la taille de l’élément. L’animation se répété à l’infini de façon alternative.
div.bouton:hover {animation: pulsation .3s infinite alternate;}
@keyframes pulsation
{from {background-size: 0px 0px;;}
to {background-size:150% 150%; }
}
|
---|