网站有图片的时候,往往需要添加一点“炫酷”的方式,下面的方法可以简单的实现网站图片添加移入放大、移出缩小的特效,简单、不复杂,人见人爱,一看就懂的方法。
样式代码:
<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尺寸根据需要设置,但是这样设置你会发现图片尺寸固定,图片就会被拉伸变型,这里可参照前面写的一篇文章解决: