如何使用 HTML 和 CSS 在悬停时摇动文本？

在网页设计中，我们经常需要添加一些动态的效果来吸引用户的注意。其中之一就是在悬停时摇动文本。本文将介绍如何使用 HTML 和 CSS 来实现这个效果。

HTML 代码

首先，我们需要在 HTML 中创建我们要使用的文本。以下是一个基本的示例：

<div class="shake">Hello World!</div>

在这个例子中，我们创建了一个 div 元素，并给它一个类名 shake。我们在这个 div 元素中添加了我们想要展示的文本。

CSS 代码

接下来，我们需要使用 CSS 来添加动态效果。我们将使用 @keyframes 关键字来实现这个效果。以下是一个完整的 CSS 代码片段：

.shake {
  animation-name: shake;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

在这个代码中，我们首先给 .shake 类添加了一个 animation 属性，它指定了这个动画的名称（shake）、持续时间（0.5 秒）和循环次数（无限循环）。

接下来，我们定义了一个 @keyframes 规则，它描述了这个动画的关键帧。在这个例子中，我们使用 transform: translateX() 属性来实现文本横向摇动的效果。我们定义了四个关键帧，分别是：

• 0%：文本不偏移；
• 25%：文本向左偏移 5 像素；
• 75%：文本向右偏移 5 像素；
• 100%：文本回到原位。

Markdown 返回结果

# 如何使用 HTML 和 CSS 在悬停时摇动文本？

在网页设计中，我们经常需要添加一些动态的效果来吸引用户的注意。其中之一就是在悬停时摇动文本。本文将介绍如何使用 HTML 和 CSS 来实现这个效果。

## HTML 代码

首先，我们需要在 HTML 中创建我们要使用的文本。以下是一个基本的示例：

```html
<div class="shake">Hello World!</div>

在这个例子中，我们创建了一个 div 元素，并给它一个类名 shake。我们在这个 div 元素中添加了我们想要展示的文本。

CSS 代码

接下来，我们需要使用 CSS 来添加动态效果。我们将使用 @keyframes 关键字来实现这个效果。以下是一个完整的 CSS 代码片段：

.shake {
  animation-name: shake;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

在这个代码中，我们首先给 .shake 类添加了一个 animation 属性，它指定了这个动画的名称（shake）、持续时间（0.5 秒）和循环次数（无限循环）。

接下来，我们定义了一个 @keyframes 规则，它描述了这个动画的关键帧。在这个例子中，我们使用 transform: translateX() 属性来实现文本横向摇动的效果。我们定义了四个关键帧，分别是：

• 0%：文本不偏移；
• 25%：文本向左偏移 5 像素；
• 75%：文本向右偏移 5 像素；
• 100%：文本回到原位。