码迷,mamicode.com
首页 > Web开发 > 详细

利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

时间:2017-12-19 15:14:00      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:添加   back   两种   ansi   contain   ack   鼠标悬停   span   实现   

1.改变background-size属性

   将图片作为某个html元素的背景图片,用transition属性改变图片的大小。

1 .container{
2     background-size: 100% 100%;
3     transition: all 2s;    
4 }
5 .container:hover{
6     background-size: 120% 120%;
7 }

这种方法有个问题是图片缩放的时候会出现抖动的现象

 

2.利用scale

   使用img标签,并在img标签上添加transform属性改变scale值

1 img{
2    transition: all 2s;
3 }
4 img:hover{
5    transform: scale(1.2);  
6 }

这种方法能够获得比较平滑的缩放效果

 

利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

标签:添加   back   两种   ansi   contain   ack   鼠标悬停   span   实现   

原文地址:http://www.cnblogs.com/NickyLi/p/8064934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!