将文本框添加到颤动

如果你想要给你的程序增加一些动态效果，颤动（shake）可以是一种非常好的选择。在这里，我们将为你介绍如何向你的程序中添加一个颤动的文本框。

HTML

首先，我们需要创建一个HTML文本框，并为其添加一个类名 ".shake"，以便我们能够在CSS样式表中调用它：

<input type="text" class="shake" placeholder="输入你的文本">

CSS

然后，我们需要编写一个CSS样式表，以将 ".shake" 元素设置为颤动状态。在这里，我们使用CSS的 "@keyframes" 关键字来指定动画的关键帧：

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

@keyframes shake {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-10px, 0);
  }
  30% {
    transform: translate(10px, 0);
  }
  50% {
    transform: translate(-10px, 0);
  }
  60% {
    transform: translate(10px, 0);
  }
  80% {
    transform: translate(-10px, 0);
  }
  100% {
    transform: translate(0);
  }
}

在这个样式表中，我们定义了一个动画 ".shake"，使用了 "translate" 属性来将文本框在水平方向上移动。我们还注意到，我们将 "animation-iteration-count" 设置为 "infinite"，以保证动画不断播放。

效果

现在，我们的文本框就能够颤动了！你可以将代码片段直接复制到你的项目中，以获得一个类似下面这样的效果：

## 结论

本文向大家介绍了如何在HTML程序中添加颤动文本框。我们使用了CSS的 "@keyframes" 关键字来指定动画的关键帧，为 ".shake" 元素设置了动画。我们成功地创建了一个能够在水平方向上颤动的文本框。

你可以将代码片段直接复制到你的项目中，以获得一个同样颤动的文本框。