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

在有些情况下，我们想要突出显示一些文本或者让它更加生动，这时候可以使用 CSS 来实现在悬停时摇动文本的效果。在本文中，我们将会介绍如何使用 HTML 和 CSS 来实现这个效果。

HTML

在 HTML 中，我们需要定义一个容器来装载需要摇动的文本。在本例中，我们将使用一个 div 容器，并给它一个 ID 名称为 "shake-text"。在这个 div 中，我们可以放置任意要摇动的文本内容。

<div id="shake-text">
    Hello World!
</div>

CSS

在 CSS 中，我们需要定义一个类来定义摇动文本的动画效果。在本例中，我们将定义一个名称为 "shake" 的类来实现这个效果。在这个类中，我们需要定义以下属性：

• animation-name: 定义动画的名称，并且它必须与 @keyframes 中的动画名称相同。
• animation-duration: 定义动画的持续时间，通常使用秒作为单位。
• animation-timing-function: 定义动画的时间函数，它可以控制动画的加速和减速。
• animation-iteration-count: 定义动画的重复次数，通常使用 infinite 来实现无限循环。

#shake-text {
    font-size: 48px;
    text-align: center;
    margin-top: 40px;
}

.shake {
    animation-name: shake-animation;
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes shake-animation {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-10px) rotate(-5deg);
    }
    50% {
        transform: translateX(10px) rotate(5deg);
    }
    75% {
        transform: translateX(-10px) rotate(-5deg);
    }
    100% {
        transform: translateX(0px);
    }
}

运行效果

下面是实现后的运行效果。

结论

在本文中，我们介绍了如何使用 HTML 和 CSS 来实现在悬停时摇动文本的效果。通过这个例子，我们学习了如何定义一个类和一个动画，并且如何将它们应用到 HTML 元素中。