Dans le code suivant, on peut modifier le nombre de tours, ici limité à 3.
Le texte écrit à l'intérieur que l'on peut même remplacer par une photo.
La hauteur et la longueur mais on obtiendra une figure différente.
Ainsi 150 X 150 donnera un cercle.
CODE
<style type="text/css">.divRonde{
display:inline-block;
margin:20px;
width:250px;
height:250px;
border:solid 1px black;
background-color:blue;
border-radius:75px;
line-height:150px;
font-size:24px;
text-align:center;
}
#animCount{
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:3; -webkit-animation-iteration-count:3;
-moz-animation-iteration-count:3; -o-animation-iteration-count:3;
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 class="divRonde" id="animCount"><span style="color:#FFFFFF;">Je tourne 3 fois sur moi-même</span></div>
RESULTAT
Haut de page
commentaires