利用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%;
}
这种方法有个问题是图片缩放的时候会出现抖动的现象
上海,上海