使用 HTML 和 CSS 在悬停时摇动按钮

当我们悬停在一个按钮上时，通常会希望它提供一些反馈，例如变换颜色或者放大一些。今天我们来看一种有趣的效果，在悬停时让按钮摇动起来。

实现方法

我们可以使用 CSS3 中的 @keyframes 和 animation 属性来实现这个效果。

首先，我们需要定义一个样式来设置按钮在悬停时的状态。在这个状态下，我们会让按钮往左右两边来回摇动：

.button:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

在这个样式中，我们定义了一个 shake 帧动画，并使用 animation 属性将其应用于按钮的悬停状态。这个动画运行时间为 0.82 秒，使用了一个叫做 cubic-bezier 的动画函数来控制摇晃的加速度曲线。

在 shake 动画中，我们按照时间轴顺序定义了一些关键帧：10% 和 90% 时按钮会向左移动 1px，20% 和 80% 时按钮会向右移动 2px，30%，50%，70% 时按钮会向左移动 4px，40% 和 60% 时按钮会向右移动 4px。这些移动效果组合在一起，就可让按钮往左右两边来回摇晃了。

运用

只需在 HTML 中将按钮的 class 设置为 .button，就可以应用这个特效了：

<button class="button">摇摆按钮</button>

点击这个按钮，就可体验到它悬停时的动画效果啦。

结语

本文简要介绍了如何使用 CSS3 中的帧动画和 animation 属性，实现了一个有趣的悬停动画效果。将这个摇动按钮的样式应用到您的网站中，可以增强用户交互体验，带来更好的视觉效果。