JS特效第147弹：CSS3鼠标经过图片旋转放大特效

马coder

于 2024-02-14 11:15:00 发布

阅读量329

点赞数 5

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/weixin_38343072/article/details/136064333

版权

CSS3鼠标经过图片旋转放大特效是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果，先来看看效果：

一部分关键的代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3鼠标经过图片旋转放大特效 - php中文网</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://php.cn/" target="_blank">php中文网</a></p>
</div>
</body>
</html>

全部代码：CSS3鼠标经过图片旋转放大特效