ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

MOUVEMENT PERPETUEL ROTATIF AVEC UNE IMAGE.

par André Marini 5 Février 2015, 10:05 Images

MOUVEMENT PERPETUEL ROTATIF AVEC UNE IMAGE.

Comme dans les exemples précédents, on peut remplacer le texte par une image éditée en veillant à ce qu'elle fasse 150 par 150 qui, ici est la taille du cercle.

 

CODE ANIMATION LENTE

<style type="text/css">.divRonde{ 
   display:inline-block; 
   margin:20px; 
   width:150px; 
   height:150px; 
   border:solid 1px black; 
   background-color:white; 
   border-radius:75px; 
   line-height:150px; 
   font-size:24px; 
   text-align:center; 
} 
#animDivLente{ 
   animation-name:rotation; -webkit-animation-name:rotation; 
   -moz-animation-name:rotation; -o-animation-name:rotation; 
   animation-duration:6s; -webkit-animation-duration:6s; 
   -moz-animation-duration:6s; -o-animation-duration:6s; 
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 
} 
@keyframes rotation{ 
   from {transform:rotate(0deg);} to {transform:rotate(360deg);} 
} 
@-webkit-keyframes rotation{ 
   from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes rotation{ 
   from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);} 
} 
@-o-keyframes rotation{ 
   from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);} 
}
</style>
<div class="divRonde" id="animDivLente"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150205/ob_3723cb_1.jpg"></div>

 

RESULTAT

CODE ANIMATION RAPIDE

 

<style type="text/css">.divRonde{ 
   display:inline-block; 
   margin:20px; 
   width:150px; 
   height:150px; 
   border:solid 1px black; 
   background-color:lightsteelblue; 
   border-radius:75px; 
   line-height:150px; 
   font-size:24px; 
   text-align:center; 
} 
#animDivRapide{ 
   animation-name:rotation; -webkit-animation-name:rotation; 
   -moz-animation-name:rotation; -o-animation-name:rotation; 
   animation-duration:2s; -webkit-animation-duration:2s; 
   -moz-animation-duration:2s; -o-animation-duration:2s; 
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 
} 
@keyframes rotation{ 
   from {transform:rotate(0deg);} to {transform:rotate(360deg);} 
} 
@-webkit-keyframes rotation{ 
   from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes rotation{ 
   from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);} 
} 
@-o-keyframes rotation{ 
   from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);} 
}
</style>
<div class="divRonde" id="animDivRapide"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150205/ob_3723cb_1.jpg" /></div>

 

RESULTAT

commentaires

Haut de page

Theme: Autofocus © 2013 - Hébergé par Overblog