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

MOUVEMENT UNIVERSEL. ET POURTANT, ELLE TOURNE COMME A DIT GALILEE

par André Marini 3 Février 2015, 12:06 Images

MOUVEMENT UNIVERSEL. ET POURTANT, ELLE TOURNE COMME A DIT GALILEE

Voici l'effet surprenant du mouvement universel.

Un cercle, que l'on peut d'ailleurs transformer, est animé d'une rotation.

Ce code fait intervenir du CSS dans le html. 

<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; 

#animInfinite{ 
   animation-name:rotation; -webkit-animation-name:rotation; 
   -moz-animation-name:rotation; -o-animation-name:rotation; 
   animation-duration:3s; -webkit-animation-duration:3s; 
   -moz-animation-duration:3s; -o-animation-duration:3s; 
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 
   animation-timing-function:linear; -webkit-animation-timing-function:linear; 
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear; 

@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 id="animInfinite" class="divRonde"> 
   Mal de mer ! 
</div>

 

Mal de mer !

On peut aussi faire tourner un texte à l'extérieur en modifiant la phrase "mal de mer".

LA TERRE  LA LUNE

commentaires

Haut de page