一下是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>
直接复制方可测试。