鼠标移动到图片上图片逐渐变大变清晰(带有过渡效果)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标移动到图片上图片逐渐变大变清晰(带有过渡效果)相关的知识,希望对你有一定的参考价值。

<!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/375x375/115/638/liZVVgjbgJHDs.jpg" />
</div>
</body>
</html

以上是关于鼠标移动到图片上图片逐渐变大变清晰(带有过渡效果)的主要内容,如果未能解决你的问题,请参考以下文章

两种方式实现鼠标悬停图片逐渐变大

黑马day18 鼠标事件&amp;图片变大

淘宝店铺图片,鼠标移动到宝贝图片上去会出现边框,同时图片会变大或缩小,请问这种效果怎么做,谢谢

鼠标移动过去变大变绿

CSS中3d导航为什么要加过渡效果

我用css让一个图片从左到右移动,有没有啥办法当鼠标移动到图片上时,图片停止移动,鼠标放开后继续