本人是HTML5-CSS3初学者，这次分享一款纯CSS3实现的图片动画，当鼠标滑过小图标时，图标会放大，同时图标会出现旋转的动画效果。我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就是利用这种方法实现的。由于只用到CSS3，所以实现的代码比较简单。
<!–
*{margin:0px;padding:0px;}
#nav{width:980px;height:350px;margin:50px auto;}
#nav ul li{list-style:none;background:brown;height:105px;width:180px;float:left;margin:60px 5px;position:relative;}
#nav ul li:before{
content:””;height:105px;width:180px;background:brown;position:absolute;top:0px;left:0px;
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
}
#nav ul li:after{
content:””;height:105px;width:180px;background:brown;position:absolute;top:0px;left:0px;z-index:1;
transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
}
#nav ul li.mar{margin-left:100px;}
#nav ul li img{
top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:2;position:absolute;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
#nav ul li img:hover{
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
}
–>
//附上代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS3鼠标滑过图标放大旋转动画DEMO演示</title>
<style type=”text/css”>
*{margin:0px;padding:0px;}
#nav{width:980px;height:350px;margin:50px auto;}
#nav ul li{list-style:none;background:rgba(0,0,0,.5);height:105px;width:180px;float:left;margin:60px 5px;position:relative;}
#nav ul li:before{
content:””;height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
}
#nav ul li:after{
content:””;height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;z-index:1;
transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
}
#nav ul li.mar{margin-left:100px;}
#nav ul li img{
top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:2;position:absolute;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
#nav ul li img:hover{
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
}
</style>
</head>
<body>
<div id=”nav”>
<ul>
<li><img src=”data:images/1.png”/></li>
<li><img src=”data:images/2.png”/></li>
<li><img src=”data:images/3.png”/></li>
<li><img src=”data:images/4.png”/></li>
<li><img src=”data:images/5.png”/></li>
<li class=”mar”><img src=”data:images/1.png”/></li>
<li><img src=”data:images/7.png”/></li>
<li><img src=”data:images/8.png”/></li>
<li><img src=”data:images/9.png”/></li>
<li><img src=”data:images/10.png”/></li>
<li><img src=”data:images/11.png”/></li>
<li><img src=”data:images/12.png”/></li>
<li><img src=”data:images/13.png”/></li>
<li><img src=”data:images/14.png”/></li>
</ul>
</div>
</body>
</html>
