css实现悬浮时图标抖动效果

要在CSS中实现悬浮时图标抖动效果，可以使用animation属性和keyframes规则来创建抖动动画。以下是一个简单的例子，其中使用了旋转和缩放的组合效果来实现图标的抖动：

/* 图标抖动动画 */
@keyframes iconShake {
    0% { transform: translateX(-5px) rotate(0deg); }
    25% { transform: translateX(5px) rotate(10deg); }
    50% { transform: translateX(-5px) rotate(-10deg); }
    75% { transform: translateX(5px) rotate(10deg); }
    100% { transform: translateX(-5px) rotate(0deg); }
}
 
/* 悬浮在图标上方时触发抖动 */
.icon:hover {
    animation: iconShake 0.5s; /* 抖动持续时间和动画名称 */
    animation-iteration-count: infinite; /* 抖动重复次数 */
}

在HTML中，你可以这样使用：

<div class="icon">
    <!-- 这里放置你的图标，可以是图像或字体图标等 -->
</div>

将上述CSS添加到你的样式表中，并将.icon类添加到你想要实现抖动效果的图标元素上。当鼠标悬浮在该元素上时，它将开始抖动。