HTML5+css3 图片放大效果代码
HTML5+css3 图片放大效果代码HTML5代码如下：
<div class="enlarge">
<img src="xx" alt="图片"/>
</div>第一种效果超出不隐藏：
.enlarge{
width: 200px;
height: 200px;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}第二种css3图片放大超出隐藏：
.enlarge{
width: 200px;
height: 200px;
overflow: hidden;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}
页:
[1]