css 图片 鼠标悬停 抖动

CSS的悬停效果是网页设计中必不可少的一部分。鼠标指针悬停在图片上时，抖动效果是一种比较流行的醒目方式，本文将介绍如何使用CSS实现这种抖动效果。

    .image {
      transition: transform 0.2s ease-in-out;
    }
    .image:hover {
      transform: rotate(3deg) scale(1.1);
    }

首先，我们需要定义一个CSS选择器来定位要应用悬停效果的图片。接着，我们需要定义过渡效果，这里我们使用transition属性来控制transform属性在0.2秒内从初始状态到结束状态平滑过渡。transform属性用来控制图像的旋转角度和缩放比例。在:hover伪类中，我们使图片旋转3度，并将其大小扩大10%。

通过这些CSS代码，我们可以在鼠标悬停时让图像产生抖动效果，这是一种非常有趣和生动的方式来吸引用户的注意力，这将使您的网站更加吸引人，增强用户体验。