网站有图片的时候，往往需要添加一点“炫酷”的方式，下面的方法可以简单的实现网站图片添加移入放大、移出缩小的特效，简单、不复杂，人见人爱，一看就懂的方法。
样式代码：
<style>
/* 设置父级尺寸，超出隐藏 */
.main{ width:300px; height:300px; overflow:hidden;}
/* 图片尺寸设置 */
.main img{ width:300px; height:300px;}
/* 图片移入、移出特效 */
.main img{
transition:transform 0.9s;
-moz-transition:-moz-transform 0.9s;
-webkit-transition:-webkit-transform 0.9s;
-o-transition:-o-transform 0.9s;
}
.main img:hover{
transform:scale(1.4);
-moz-transform:scale(1.4);
-webkit-transform:scale(1.4);
-o-transform:scale(1.4);
}
</style>html代码：
<div class="main"> <img src="http://5ibear.com/zb_users/upload/2017/12/20171201103629151209578988381.jpg" /> </div>
完整代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>网站图片添加移入放大、移出缩小特效</title>
<style>
/* 设置父级尺寸，超出隐藏 */
.main{ width:300px; height:300px; overflow:hidden;}
/* 图片尺寸设置 */
.main img{ width:300px; height:300px;}
/* 图片移入、移出特效 */
.main img{
transition:transform 0.9s;
-moz-transition:-moz-transform 0.9s;
-webkit-transition:-webkit-transform 0.9s;
-o-transition:-o-transform 0.9s;
}
.main img:hover{
transform:scale(1.4);
-moz-transform:scale(1.4);
-webkit-transform:scale(1.4);
-o-transform:scale(1.4);
}
</style>
</head>
<body>
<div class="main">
<img src="http://5ibear.com/zb_users/upload/2017/12/20171201103629151209578988381.jpg" />
</div>
</body>
</html>图片及父级DIV尺寸根据需要设置，但是这样设置你会发现图片尺寸固定，图片就会被拉伸变型，这里可参照前面写的一篇文章解决：
