web前端 图片缩放特效
如下图:
当鼠标进入div框内;图片发生放大或缩小
代码:
<div>
<ul class="div-tupian-ul">
<li><img src="http://f10.baidu.com/it/u=247176219,1089816087&fm=76" width="159" height="117" alt="颈椎引起的眩晕" /></li>
</ul>
</div>
<div>
<ul class="div-tupian-ul">
<li><img src="http://f10.baidu.com/it/u=247176219,1089816087&fm=76" width="159" height="117" alt="颈椎引起的眩晕" /></li>
</ul>
</div>
css样式:
<style>
.div-tupian-ul li{
float:left;
border: #F00 solid 2px;
width:159px; height:117px;
overflow:hidden; cursor:pointer;
margin:10px;
}
.div-tupian-ul li img{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;}
.div-tupian-ul li:hover img{-webkit-transform:scale(1.15);
-moz-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
</style>