css3鼠标滑过放大缩小过渡特效

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

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

以下是 css3鼠标滑过放大缩小过渡特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css3鼠标滑过放大缩小过渡特效</title>
<style type="text/css">
/*全局定义*/
*{margin:0;/*外边距*/padding:0;/*内边距，填充*/}
ul{list-style:none}
.html5{width:860px;height:450px;background:#666;margin:80px auto 0;/*80px上边距，auto右边边距，居中，0下边距*/}
/*ul图片展示*/
.html5 ul li{float:left;margin-left:25px;/*左边距离*/margin-top:20px;cursor:pointer}
.html5 ul li img{width:255px;height:195px;/* width属性：255px值单位*/opacity:0.5}
.html5 ul li:hover img{
	transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
	-o-transform:scale(0.5,0.5);
	/*x,y值，*/
	transition:all 1s;
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	/*对前效果的过度*/
	opacity:1;z-index:1
}
</style>
</head>
<body>
<div class="html5">
	<ul><!--无序列表标签-->
		<li><img src="images/1.jpg"/></li>
		<li><img src="images/2.jpg"/></li>
		<li><img src="images/3.jpg"/></li>
		<li><img src="images/4.jpg"/></li>
		<li><img src="images/5.jpg"/></li>
		<li><img src="images/6.jpg"/></li>
	</ul>
</div>
</body>
</html>

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