纯CSS3悬停图标旋转导航动画代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3悬停图标旋转导航动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3</title>

<link href="css/style.css" type="text/css" rel="stylesheet" />

</head>
<body>

<div id="x_contant">
	<a class="xzt1" href="#"><img src="images/xztz_1.png" /></a>
	<a class="xzt2" href="#"><img src="images/xzt_2.png" /></a>
	<a class="xzt3" href="#"><img src="images/xztz_3.png" /></a>
	<a class="xzt4" href="#"><img src="images/xzt_4.png" /></a>
	<a class="xzt5" href="#"><img src="images/xztz_5.png" /></a>
	<a class="xzt6" href="#"><img src="images/xzt_6.png" /></a>
	<a class="xzt7" href="#"><img src="images/xztz_7.png" /></a>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
img{margin:0;padding:0;border:0;}
#x_contant{width:980px;height:315px;margin:0 auto;position:relative;background:url(../images/xzt_bg.jpg) 0 0 no-repeat;}
#x_contant a{width:125px;height:125px;}
#x_contant a img{display:block;-webkit-transition:-webkit-transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out;transition:transform 0.4s ease-out;width:125px;height:125px;}
#x_contant a:hover img{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);}
#x_contant .xzt1{position:absolute;left:14px;top:161px;}
#x_contant .xzt2{position:absolute;left:161px;top:109px;}
#x_contant .xzt3{position:absolute;left:331px;top:32px;}
#x_contant .xzt4{position:absolute;left:489px;top:103px;}
#x_contant .xzt5{position:absolute;left:618px;top:31px;}
#x_contant .xzt6{top:149px;right:109px;position:absolute;}
#x_contant .xzt7{position:absolute;left:856px;top:21px;}

附件:下载该文件资源,减少时间成本(增值服务)