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

Comment réaliser un logo animé, tournant sur lui-même.

par André MARINI 7 Janvier 2016, 08:19 Images

Cette animation fait très simplement intervenir du HTML et du CSS.

 

HTML

 

<div id="monlogo"><img alt="logo qui tourne" src="http://data.over-blog-kiwi.com/1/30/51/51/20160107/ob_038c27_image2.jpg"></div>

 

CSS dans le code html mais compris entre les balises <style></style>

 

<style type="text/css">#monlogo  img{
  -webkit-transition:-webkit-transform .9s; // Chrome Safari
  -moz-transition:-moz-transform .9s;       // Mozilla
  -o-transition:-o-transform .9s;           // Opéra
  -ms-transition:-ms-transform .9s;         // IE
  transition:transform .9s;
}
#monlogo  img:hover{
  -webkit-transform:rotate(7200deg); 
  -moz-transform:rotate(7200deg);
  -o-transform:rotate(7200deg); 
  -ms-transform:rotate(7200deg); 
  transform:rotate(7200deg);
}
</style>

Sa vitesse de rotation est adaptable à plusieurs navigateurs et le nombre de rotations doit être un multiple de 360 degrés pour que l'image se repositionne.

 

Dans l'exemple, je la fais tourner 20 fois soit 360 X 20.

 

CODE

<div id="monlogo"><img alt="logo qui tourne" src="http://data.over-blog-kiwi.com/1/30/51/51/20160107/ob_038c27_image2.jpg">
<style type="text/css">#monlogo  img{
  -webkit-transition:-webkit-transform .9s; // Chrome Safari
  -moz-transition:-moz-transform .9s;       // Mozilla
  -o-transition:-o-transform .9s;           // Opéra
  -ms-transition:-ms-transform .9s;         // IE
  transition:transform .9s;
}
#monlogo  img:hover{
  -webkit-transform:rotate(7200deg); 
  -moz-transform:rotate(7200deg);
  -o-transform:rotate(7200deg); 
  -ms-transform:rotate(7200deg); 
  transform:rotate(7200deg);
}
</style>
</div>

 

RESULTAT

Haut de page

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