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

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


①.利用scale


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

img{transition: all 0.3s;}

img:hover{transform: scale(1.1);}

 

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


②.改变background-size属性


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

.container{

 background-size: 100% 100%;

 transition: all 2s;    

}

.container:hover{

 background-size: 120% 120%;

}

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

上海,上海

评论列表 评论
发布评论

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

已有0次打赏
(6) 分享
分享

请保存二维码或复制链接进行分享

取消