<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）</title>
<style type=”text/css”>
div{
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
filter:alpha(Opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
div img{
cursor: pointer;
transition: all 0.6s;
-moz-transition: all 0.6s; /* 0.6s完成过渡效果 */
-webkit-transition: all 0.6s;
}
div img:hover{
transform: scale(1.2); /* 放大1.2倍 */
}
div:hover{
filter:alpha(Opacity=100);
-moz-opacity:1;
opacity: 1;
}
</style>
</head>
<body>
<div>
<img title=”鼠标移上来，我变清晰了，逐渐变大了” src=”http://new-img2.ol-img.com/375×375/115/638/liZVVgjbgJHDs.jpg” />
</div>
</body>
</html

版权声明：本文为fightjianxian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fightjianxian/p/7954910.html