`
zhengdl126
  • 浏览: 2508227 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

css3图片鼠标滑过放大效果

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3图片鼠标滑过放大效果</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; }
table{border-collapse:collapse;border-spacing:0;}
a{ color:#333; text-decoration:none;}
a:hover{ text-decoration:none;}
.scale{ width:420px; margin:20px auto; height:70px; }
.scale li img{border:2px solid #E2E2E2;float: left;height:80px;margin-right:25px;opacity: 0.8;overflow: hidden; padding: 2px;width:90px;}
.scale li:hover img{-webkit-transform:scale(1.23);-moz-transform: scale(1.23);-o-transform:scale(1.23);}
</style></head>

<body>
<ul class="scale">
    <li><a href="#"><img src="11.png"></a></li>
    <li><a href="#"><img src="11.png"></a></li>
    <li><a href="#"><img src="11.png"></a></li>
</ul>


</body></html>

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics