做人第一 学习第二

CSS3鼠标悬停图片放大缩小效果

效果:

<style>
.webstr{ width:960px; height:auto; margin:100px auto; overflow:hidden;}
.webstr li{border:2px solid #112F59; width:310px; height:220px; overflow:hidden; margin:3px; float:left; cursor:pointer
}
.webstr li:hover{border:2px solid #016C93;
}
 
.webstr li img{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);
-webkit-transition:all 0.7s ease;-moz-transition:all 0.7s ease;-o-transition:all 0.7s ease;transition:all 0.7s ease;
}
.webstr li:hover img{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
-webkit-transition:all 0.7s ease;-moz-transition:all 0.7s ease;-o-transition:all 0.7s ease;transition:all 0.7s ease;
}
</style>
<ul class="webstr">
 <li><img src="images/01.jpg" title="宋子宪博客的游客" /></li>
</ul>

 

此文如未标注转载均为本站原创,自由转载请表明出处 宋子宪博客 » CSS3鼠标悬停图片放大缩小效果

发表评论

游客 表情
送你一朵小花花~

帅人已评:(0)