Dans l'article précédent, le texte seul peut être remplacé par une image éditée et, éventuellement, un peu de texte.
CODE
<style type="text/css">
.divRonde{
display:inline-block;
margin:150px;
width:150px;
height:150px;
border:solid 1px black;
background-color:lightsteelblue;
border-radius:25px;
line-height:40px;
font-size:34px;
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">
<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150204/ob_0c04ce_orgasm-point-g-300x211.jpg">oui, oui, encore !</div>
RESULTAT
oui, oui, encore !
Haut de page
commentaires