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

BOULE QUI ROULE N'AMASSE PAS MOUSSE.

par André Marini 8 Mars 2015, 10:47 Astuces de blogueur

BOULE QUI ROULE N'AMASSE PAS MOUSSE.

Animation qui permet de faire rouler une boule sur une ligne

 

Ce code permet de transformer une sphère statique en sphère animée dont on peut changer la vitesse de rotation, la couleur et la forme.

 

A)-COULEUR

 

1)-Pour la couleur du bord que je désigne indifféremment par le code couleur ou par le terme anglais:  

 border:solid 10px #909E87; 

2)-Pour la couleur du fond

background-color:blue; 

 

B)-FORME

 

Il suffit de changer "width" et "heigt" pour obtenir une autre forme géométrique.

 

C)-TEMPS DE ROTATION

 

Il suffit de changer 4s, soit plus, soit moins pour être plus rapide.

 

D)-MOUVEMENT 

 

Le mouvement est déclaré "infinite" donc ne s'arrête pas et "alternate" pour aller de gauche à doite puis de droite à gauche. Ceci peut aussi être modifié.

 

CODE

 

<style type="text/css"> 
#animDiv{ 
   position:relative; 
   display:inline-block; 
   width:150px; 
   height:150px; 
   border:solid 10px #909E87; 
   border-radius:85px; 
   background-color:blue; 
   line-height:150px; 
   font-size:24px; 
   text-align:center; 

   animation-name:animRoule; -webkit-animation-name:animRoule; 
   -moz-animation-name:animRoule; -o-animation-name:animRoule; 
   animation-duration:4s; -webkit-animation-duration:4s; 
   -moz-animation-duration:4s; -o-animation-duration:4s; 
   animation-iteration-count :infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 
   animation-direction:alternate; -webkit-animation-direction:alternate; 
   -moz-animation-direction:alternate; -o-animation-direction:alternate; 
   animation-timing-function:linear; -webkit-animation-timing-function:linear; 
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear; 
   animation-delay:10s; -webkit-animation-delay:10s; 
   -moz-animation-delay:10s; -o-animation-delay:10s; 
} 

@keyframes animRoule{ 
   from {transform:rotate(0deg); left:0px;} to {transform:rotate(360deg); left:350px;} 
} 
@-webkit-keyframes animRoule{ 
   from {-webkit-transform:rotate(0deg); left:0px;} to {-webkit-transform:rotate(360deg); left:350px;} 
} 
@-moz-keyframes animRoule{ 
   from {-moz-transform:rotate(0deg); left:0px;} to {-moz-transform:rotate(360deg); left:350px;} 
} 
@-o-keyframes animRoule{ 
   from {-o-transform:rotate(0deg); left:0px;} to {-o-transform:rotate(360deg); left:350px;} 
} 
</style> 

<div id="animDiv"> 
   Allez ! 
</div> 

 

RESULTAT retardé de 10 secondes. 

 

Allez !

commentaires

Haut de page

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