CSS: Achieve the effect of the text shaking when the mouse is hovered

Use @keyframes keyframe animation in CSS to create this shaking effect. Here's a simple example showing how to use keyframe animation to achieve this effect:

@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;
}

In the above code:

1. We define a @keyframes rule named shake. This rule defines the text shaking animation effect, which uses the transform attribute to change the position of the element at different percentages of time.

2. The percentages used in @keyframes rules represent the time distribution of the animation during its execution. At 0% and 100% time points, the text does not change; at other time points, the text shakes left and right.

3. The .shake-text class selector is used to apply a shake effect to a specific text element.

4. The animation attribute applies shake animation to the text element, sets the animation duration to 0.5s, and sets it to infinite loop execution.

Add this CSS code to your stylesheet and add a text element with the .shake-text class to your HTML to trigger the text shake effect on mouseover:

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

Note that this is just a simple example and you can adjust the duration, amplitude, and other parameters of the animation as needed.