css如何实现一个元素抖动

CSS有很多有趣的特效，其中之一是让元素抖动。通过一些简单的代码，我们可以实现一些有趣的动画效果，比如让按钮在鼠标悬停时抖动。

.btn{
      padding: 10px;
      background-color: #007bff;
      color: #fff;
      border: none;
      outline: none;
      cursor: pointer;
      transition: transform .3s ease-in-out;
}
.btn:hover{
      animation: shake .8s;
      animation-iteration-count: infinite;
}
@keyframes shake {
  0% {
    transform: translate(0, 0);
}
  10% {
    transform: translate(-5px, 0);
}
  20% {
    transform: translate(5px, 0);
}
  30% {
    transform: translate(-5px, 0);
}
  40% {
    transform: translate(5px, 0);
}
  50% {
    transform: translate(-5px, 0);
}
  60% {
    transform: translate(5px, 0);
}
  70% {
    transform: translate(-5px, 0);
}
  80% {
    transform: translate(5px, 0);
}
  90% {
    transform: translate(-5px, 0);
}
  100% {
    transform: translate(0, 0);
}
}
    

代码中，我们使用了CSS关键帧动画。我们定义了键帧动画shake，用于让按钮元素抖动。我们使用@keyframes关键字定义了动画效果，让按钮在鼠标悬停时无限重复。我们设置了10个关键帧，将按钮在不同的位置上振动，最后让它回到原来的位置。

我们在:hover伪类下，通过animation属性声明了shake动画，并设置了无限循环的动画效果。这样我们就实现了按钮抖动效果。

总的来说，CSS动画效果非常有趣，可以让我们的网站看起来更加生动。有了这些简单而有趣的效果，我们可以快速吸引用户的注意力，增强了用户的交互体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！