首页 > 代码库 > CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

2024-09-21 00:58:33   217人阅读

转载自： http://blog.csdn.net/u014175572/article/details/51535768

CSS3的transform:scale()可以实现按比例放大或者缩小功能。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

效果如下图所示：

1、当未鼠标未放到图片上的效果：

技术分享

2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：

技术分享

 

代码如下：

 1 <!DOCTYPE html>  
 2 <html>  
 3     <head>  
 4         <meta charset="UTF-8">  
 5         <title></title>  
 6         <style type="text/css">  
 7             div{  
 8                 width: 300px;  
 9                 height: 300px;  
10                 border: #000 solid 1px;  
11                 margin: 50px auto;  
12                 overflow: hidden;  
13             }  
14             div img{  
15                 cursor: pointer;  
16                 transition: all 0.6s;  
17             }  
18             div img:hover{  
19                 transform: scale(1.4);  
20             }  
21         </style>  
22     </head>  
23     <body>  
24         <div>  
25             <img src="img/focus.png" />  
26         </div>  
27     </body>  
28 </html>


其中： 

transition: all 0.6s;　　表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);　　表示在鼠标放到图片上的时候图片按比例放大1.4倍。

 

代码下载地址：http://download.csdn.net/detail/u014175572/9535023

CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）


联系
我们