css旋转效果

最新推荐文章于 2022-03-01 20:32:16 发布

chouzhao7980

最新推荐文章于 2022-03-01 20:32:16 发布

阅读量71

点赞数

原文链接：https://my.oschina.net/u/2440810/blog/686681

版权

一下是html代码

<!DOCTYPE html>     
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style type="text/css">
         p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}


     </style>
 </head>
 <body>
     <b>360度旋转 onmouseover和onmouseout</b></p>

<p id="socialicons">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>

<p><b>60度旋转 onMouseover and onMouseout</b></p>

<p id="socialicons2">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>

<p><b>-360度旋转 onMouseover</b></p>

<p id="socialicons3">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>


</body>
</html>