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>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章