CSS：实现鼠标悬停时文字摇晃一下的效果

使用 CSS 中的 @keyframes 关键帧动画来创建这种摇晃效果。下面是一个简单的示例，展示如何使用关键帧动画来实现这个效果：

@keyframes shake {
    
    
  0%, 100% {
    
    
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    
    
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    
    
    transform: translateX(5px);
  }
}

.shake-text {
    
    
  display: inline-block;
  animation: shake 0.5s infinite;
}

在上述代码中：

1. 我们定义了一个 @keyframes 规则，命名为 shake。这个规则定义了文字摇晃的动画效果，它在不同的百分比时间点使用 transform 属性来改变元素的位置。

2. @keyframes 规则中使用的百分比表示动画在执行过程中的时间分布。在 0% 和 100% 时间点，文字不做变化；在其他时间点，文字进行左右摇晃。

3. .shake-text 类选择器用于将摇晃效果应用到特定的文本元素。

4. animation 属性将 shake 动画应用到文本元素上，设置动画时长为 0.5s，并设置为无限循环执行。

将这段CSS代码添加到你的样式表中，并将带有 .shake-text 类的文本元素添加到HTML中，即可在鼠标悬停时触发文字的摇晃效果：

<p class="shake-text">鼠标悬停时摇晃的文字</p>

请注意，这只是一个简单的示例，你可以根据需要调整动画的持续时间、幅度和其他参数。