使用 HTML 和 CSS 实现悬停时按钮的摇动效果

htmlcssweb developmentfront end technology更新于 2024/4/18 2:20:17

在本教程中，我们将学习如何使用 HTML 和 CSS 实现用户悬停时按钮的摇动效果。创建摇动按钮可以让应用程序的用户体验更具吸引力。

我们需要使用 CSS 的"关键帧"规则创建自定义动画来摇动任何 HTML 元素。之后，我们可以将自定义关键帧用作 CSS 属性"animation"的值，以便在用户悬停在按钮上时摇动按钮。

语法

用户可以按照以下语法使用 HTML 和 CSS 实现悬停时按钮的摇动效果。

.btn:hover {
   animation: key_frame_name animation_time repetition;
}
@keyframes key_frame_name {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(10deg);
   }
}

在上述语法中，我们创建了自定义 CSS 规则，为按钮添加摇动动画。用户可以将"animation_time"替换为时间单位，将"repetition"替换为数字，以重复动画。

示例

在下面的示例中，我们垂直摇动按钮。我们使用"button"标签创建了普通的 HTML 按钮，并赋予其"btn"类名。我们使用该类名访问该按钮并设置其样式。

在 CSS 中，我们使用"animation"属性为按钮添加"摇动"关键帧，当用户将鼠标悬停在按钮上时。在"摇动"关键帧中，我们在动画时间的 0% 处将按钮旋转"0 度"，在 20% 处旋转"5 度"，在 50% 处旋转"0 度"，在 70% 处旋转"5 度"，在 100% 处再次旋转"0 度"。

在输出中，用户可以观察到垂直方向上的摇动按钮。

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: red;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.5s infinite;}
      @keyframes shaking {
         0% {transform: rotate(0deg);}
         20% {transform: rotate(-4deg);}
         50% {transform: rotate(0deg);}
         70% {transform: rotate(4deg);}
         100% {transform: rotate(0deg);}
      }
   </style>
   <body>
      <h2> Shaking the button vertically using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Submit </button>
      </div>
   </body>
</html>

示例

在下面的示例中，我们使用 HTML 和 CSS 水平摇动按钮。

我们使用 CSS 属性"transform:translateX()"在水平方向上摇动按钮。首先，我们将按钮向负方向移动。接下来，我们将按钮移回原始位置。之后，我们将按钮向正方向移动，最后，我们使用 CSS 的"关键帧"规则将按钮移回原始位置。

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: black;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(-10px);}
         20% {transform: translateX(-5px);}
         50% {transform: translateX(-5px);}
         70% {transform: translateX(-5px);}
         80% {transform: translateX(10px);}
         90% {transform: translateX(-10px);}
      }
   </style>
   <body>
      <h2> Shaking the button Horizontally using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Hover the Button </button>
      </div>
   </body>
</html>

示例

在下面的示例中，我们将学习如何水平和垂直摇动按钮。我们将"translateX()"和"rotate()"结合使用，作为"transform"CSS 属性值。

"translateX()"函数用于水平移动按钮，"rotate()"函数用于垂直移动按钮。在输出中，用户可以观察到鼠标悬停在按钮上时，按钮会水平和垂直轻微移动。但是，用户可以增加"translateX()"函数的参数值，使其在水平方向上摇动得更剧烈一些。

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: green;
         color: white;
         font-size: 25px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(0) rotate(0deg);}
         25% {transform: translateX(15px) rotate(5deg);}
         50% {transform: translateX(0px) rotate(0deg);}
         75% {transform: translateX(-15px) rotate(-5deg);}
         100% {transform: translateX(0px) rotate(0deg);}
      }
   </style>
   <body>
   <h3> Shaking the button Horizontally and vartically using HTML and CSS</h3>
   <div>
      <button class = "btn"> Point out the Button </button>
   </div>
</body>
</html>