<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3鼠标经过图片旋转放大特效 - 网页模板</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:url("images/bodyBg.jpg");}
#nav{width:980px;height:350px;margin:100px auto;}
#nav ul li{list-style:none;background:rgba(0,0,0,.5);height:105px;width:180px;float:left;margin:30px 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.5);
-moz-transform:rotate(360deg) scale(1.5);
-ms-transform:rotate(360deg) scale(1.5);
-o-transform:rotate(360deg) scale(1.5);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="nav">
<ul>
<li><img src="images/1.png"/></li>
<li><img src="images/2.png"/></li>
<li><img src="images/3.png"/></li>
<li><img src="images/4.png"/></li>
<li><img src="images/5.png"/></li>
<li class="mar"><img src="images/1.png"/></li>
<li><img src="images/7.png"/></li>
<li><img src="images/8.png"/></li>
<li><img src="images/9.png"/></li>
<li><img src="images/10.png"/></li>
<li><img src="images/11.png"/></li>
<li><img src="images/12.png"/></li>
<li><img src="images/13.png"/></li>
<li><img src="images/14.png"/></li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;"><br>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
CSS3鼠标经过图片旋转放大特效.zip
版权申诉
106 浏览量
2022-11-17
21:18:20
上传
评论
收藏 431KB ZIP 举报
CSS3鼠标经过图片旋转放大特效.zip （16个子文件） 
CSS3鼠标经过图片旋转放大特效 
CSS3鼠标经过图片旋转放大特效.jpg 89KB jiaoben4476 images 
11.png 25KB 10.png 23KB 5.png 23KB 9.png 24KB bodyBg.jpg 254KB 1.png 24KB 14.png 23KB 2.png 4KB 12.png 25KB 7.png 25KB 4.png 25KB 13.png 24KB 8.png 23KB 3.png 25KB
index.html 2KB资源评论
