CSS3实现鼠标悬停图片缓慢放大效果

鼠标没有放上去状态:

CSS3实现鼠标悬停图片缓慢放大效果_第1张图片

 鼠标放上去后:

代码实现:

(1)给图片元素添加一个放大动画

CSS3实现鼠标悬停图片缓慢放大效果_第2张图片

(2)图片的父元素添加一个overflow: hidden;属性,这个是关键。保证图片整体放大了,不超出容器

(3)再添加图片过渡动画

CSS3实现鼠标悬停图片缓慢放大效果_第3张图片

相当于:

你可能感兴趣的:(前端,html,前端,css3)