CSS3将鼠标移动到图片上使图片变大(慢慢变大有切换效果放大过程有动画切换此切换时间可以自定义)

顺晟科技

2021-09-19 13:13:58

230

转载自： 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鼠标移动照片图片放大(慢慢变下一篇：在CSS鼠标上移动会变大

网站建设

Css

CSS3将鼠标移动到图片上使图片变大(慢慢变大有切换效果放大过程有动画切换此切换时间可以自定义)

Css

CSS3将鼠标移动到图片上 使图片变大(慢慢变大 有切换效果 放大过程有动画切换 此切换时间可以自定义)

CSS3将鼠标移动到图片上使图片变大(慢慢变大有切换效果放大过程有动画切换此切换时间可以自定义)