ICI header("Location: http://www.mytesting.fr ");

Transition du plus petit au plus grand en changeant la couleur de fond.

par André Marini 16 Février 2015, 11:16 Texte

Transition du plus petit au plus grand en changeant la couleur de fond.

Pour mettre un texte en évidence, rien de plus aisé que de le placer dans un cadre qui pourra s'agrandir au passage de la souris.

Au niveau de l'effet obtenu, ceci rappelle l'image qui s'agrandit mais le code est totalement différent puisqu'il s'agit d'une transition où l'on n'indique que les dimensions.

CODE

 

<style type="text/css">.transition-div{ 
   position:relative; 
   width:150px; 
   height:110px; 
   line-height:60px; 
   font-size:14px; 
   text-align:center; 
   border:solid 1px black; 
   border-radius:5px; 
   background-color:silver; 
   -webkit-transition-property:width,height,line-height,background-color,-webkit-transform; 
   -webkit-transition-duration:1s,1s,1s,1s,1s,1s; 
   -moz-transition-property:width,height,line-height,background-color,-moz-transform;
   -moz-transition-duration:1s,1s,1s,1s,1s,1s; 
   -o-transition-property:width,height,line-height,background-color,-o-transform; 
   -o-transition-duration:1s,1s,1s,1s,1s,1s; 
   transition-property:width,height,line-height,background-color,transform; 
   transition-duration:1s,1s,1s,1s,1s,1s; 

.transition-div:hover{ 
   width:300px; 
   height:220px; 
   line-height:120px; 
   font-size:20px; 
   background-color:steelblue; 
   -webkit-transform: rotate(360deg); 
   -moz-transform: rotate(360deg); 
   -o-transform: rotate(360deg); 
}
</style>
<div id="yui_3_5_0_1_1424081771787_17942" style="padding:20px;">
<div class="transition-div">
Agrandir en changeant la couleur de fond</div>
</div>

 

On se rend compte qu'entre la position "relative" et la position "transition", les valeurs de "width" et "height" ont simplement doublé.

 

On peut, bien entendu modifier la taille du texte, sa couleur et son épaisseur.

 

RESULTAT

Agrandir en changeant la couleur de fond

commentaires

Haut de page