在前端开发中，你可以使用CSS的@keyframes动画来实现文字的抖动效果。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字抖动效果</title>
<style>
.shake-text {
font-size: 24px;
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0); }
10%, 30%, 50%, 70%, 90% { transform: translate(-5px, 0); }
20%, 40%, 60%, 80% { transform: translate(5px, 0); }
}
</style>
</head>
<body>
<div class="shake-text">这是一段抖动的文字</div>
</body>
</html>
在这个示例中，我们创建了一个名为shake的@keyframes动画。这个动画会在不同的时间点（以百分比表示）应用不同的transform属性，从而使文本在水平方向上左右移动。通过将这些移动组合在一起，并设置动画为无限循环（infinite），我们实现了文本的抖动效果。
你可以根据需要调整动画的持续时间（在这个示例中是0.5s）、移动的距离（在这个示例中是5px），以及抖动的频率和幅度，以达到你想要的效果。