[分享]css3悬停图片变大一点

CSS3技术的不断更新，让我们可以通过简单的代码实现一些让网站更具吸引力的效果。其中之一就是悬停图片变大一点的效果，可以增加用户的互动性和视觉体验。/ CSS代码 / img:hover { tran...

CSS3技术的不断更新，让我们可以通过简单的代码实现一些让网站更具吸引力的效果。其中之一就是悬停图片变大一点的效果，可以增加用户的互动性和视觉体验。

/* CSS代码 */
img:hover {
  transform: scale(1.1); /* 鼠标悬停时图片变大10% */
  transition: transform 0.5s ease-in-out; /* 动画效果，0.5秒内完成渐变 */
} 

以上代码中，我们使用了CSS3动画属性transform和transition。其中，transform属性可以改变元素的尺寸、位置、形状或方向等，此处通过scale方法控制图片的大小，参数为1.1即放大10%。transition属性指定元素的变换效果，此处设置的ease-in-out，表示动画效果缓慢开始和缓慢结束。

通过以上代码，我们就可以给网站的图片添加悬停效果。当鼠标悬停在图片上时，图片会自动变大一点，吸引用户的注意力，提高网站的互动性和美观性。