<html>
<head>
<style>
/* 定义动画 */
@keyframes shake {
0% { transform: translate(0,0); }
10%,90% { transform: translate(-5px,0); }
30%,70% { transform: translate(5px,0); }
50% { transform: translate(-10px,0); }
60% { transform: translate(10px,0); }
}
/* 应用动画到文字 */
.shake {
animation: shake 1s cubic-bezier(.36,.07,.19,.97) infinite;
}
</style>
</head>
<body>
<p class="shake">这是一段摇动的文字</p>
</body>
</html>
上述代码中，我们通过定义一个名为shake的动画，设置了文字在不同时间点上的位置偏移。在应用这个动画到文字的class上时，我们还设置了动画的持续时间为1秒，缓动函数为cubic-bezier(.36,.97)，并让动画无限循环。
通过这样的设置，我们就可以在文本上创建出摇动的效果。当然，我们也可以通过改变@keyframes动画的参数来实现不同的摇动效果，比如改变位置偏移、时间点、持续时间等等。希望这篇文章对你有所帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
