HTML5鼠标hover的时候图片放大的效果展示(仿新浪NBA) 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>HTML5鼠标hover的时候图片放大的效果展示(仿新浪NBA)</title>
 6     <style type="text/css">
 7     .imgHoverZoom{float:left;margin:5px;overflow:hidden;}
 8     .imgHoverZoom img{
 9         height:150px;
10         -webkit-transition: -webkit-transform .3s ease;
11         -moz-transition: -moz-transform .3s ease;
12         -ms-transition: -ms-transform .3s ease;
13         transition: transform .3s ease;
14     }
15     .imgHoverZoom img:hover{
16         -webkit-transform: scale(1.2);
17         -moz-transform: scale(1.2);
18         -ms-transform: scale(1.2);
19         transform: scale(1.2)
20     }
21     </style>
22 </head>
23 <body>
24     <a href="" class="imgHoverZoom"><img src="./img/1.jpeg" /></a>
25     <a href="" class="imgHoverZoom"><img src="./img/2.jpeg" /></a>
26     <a href="" class="imgHoverZoom"><img src="./img/3.jpeg" /></a>
27     <a href="" class="imgHoverZoom"><img src="./img/4.jpeg" /></a>
28 </body>
29 </html>

 

 http://www.dodobook.net/html/2392

posted @ 2015-10-29 13:56  HatRed  阅读(303)  评论(0)    收藏  举报