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

时间：2017-12-19 14:29:45 阅读：237 评论：0 收藏：0 [点我收藏+]

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 }

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

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

踩

(0)

评论一句话评论（0）

分享档案

更多>