[分享]css3怎样鼠标移上去图片变大

CSS3 提供了很多新的特性，让我们可以轻松实现一些以前只有用 JS 才能实现的效果，比如当鼠标移上去时，图片变大。下面是一个例子：/ CSS 代码 / img { webkittransition:...

CSS3 提供了很多新的特性，让我们可以轻松实现一些以前只有用 JS 才能实现的效果，比如当鼠标移上去时，图片变大。

下面是一个例子：

/* CSS 代码 */
img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

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

这里用了 transition 属性来实现图片变大的动画效果。我们先把 transition 设置成 0.3 秒，并指定一个过渡函数（ease-out），这样图片的大小变化就会有一个稍微缓慢的过程，不会显得很突兀。

接下来，当鼠标移到图片上时，我们使用了 :hover 伪类来定义样式，也就是说，当鼠标悬停在图片上时，样式会发生变化。这里我们使用了 transform 属性，将图片放大到 1.1 倍大小。由于我们在之前已经定义了过渡效果，所以这里图片的变化会有一个缓慢的过程。

通过这样一个简单的例子，我们可以看到，CSS3 的特性让我们能够更加方便地实现一些常用的效果，而不必一定依赖 JS。这样也减少了页面加载时需要下载的 JS 文件的数量，提高了页面的性能。