html如何实现鼠标移动到图片上图片自动放大？鼠标移开又自动还原，这个代码通常用于html页面的单个活动，这里荣帅分享下详细的代码和注释，完整版代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html图片放大,html实现图片放大效果" />
<meta name="description" content="html如何实现鼠标移动到图片上图片自动放大？鼠标移开又自动还原，这个代码通常用于html页面的单个活动，这里荣帅分享下详细的代码和注释，完整版代码如下：" />
</head>
<style>
*{margin:0;padding:0;}
.yang{width:300px;height:300px;border:1px dashed #ccc;margin:80px auto;}
.yang img{width:300px;height:300px;transition:all 0.5s;}/*图片放大过程的时间*/
.yang img:hover{
transform: scale(1.2);/*鼠标经过图片放大的倍数*/
}
.ziti{width:300px;height:40px;border:1px dashed red;text-align:center;margin:80px auto;}
</style>
<body>
<!--transform:scale()可以实现按比例放大或者缩小功能。transition允许CSS的属性值在一定的时间区间内平滑过渡 可以调节放大倍数以及放大过程所用时间。-->
<div style="width:400px;height:600px;border:1px solid red;margin:120px auto;">
<div class="yang"><img src="http://www.c2bseo.com/zb_users/theme/metro/style/images/random/2.jpg" width="300px" height="300px" /></div>
<div class="ziti"><span>鼠标放到图片上图片放大</span></div>
</div>
</body>
</html>
如果感觉不错就点个赞吧！
2、如果要兼容的话需要在hover效果里面加上如下代码
-webkit-transform: scale(1.2); /*Safari 和 Chrome*/
-moz-transform: scale(1.2); /*Firefox*/
-ms-transform: scale(1.2); /*IE9*/
-o-transform: scale(1.2); /*Opera*/
3、在类yang中最好加入overflow，不然的话放大会溢出，挤压下面的div
overflow:hidden; /*overflow作用是溢出隐藏*/
发表评论 取消回复