使用css实现文字抖动

在前端开发中，你可以使用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），以及抖动的频率和幅度，以达到你想要的效果。

posted @ 2024-12-21 09:52  王铁柱6  阅读(155)  评论(0)    收藏  举报