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

在本教程中，我们将学习使用HTML和CSS在用户悬停时抖动按钮的方法。创建一个抖动的按钮可以使应用程序的用户体验更加吸引人。

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

语法

用户可以按照以下语法使用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”以重复动画。

示例1

在下面的示例中，我们垂直地抖动按钮。我们使用“button”标签创建了普通的HTML按钮，并给它赋予了“btn”类名。我们通过类名访问按钮并对其进行样式设置。

在CSS中，我们使用“animation”属性在用户悬停在按钮上时添加了“shaking”关键帧。在“shaking”关键帧中，我们在动画时间的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>

示例2

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

我们使用了CSS属性“transform: translateX（）”来使按钮在水平方向上摇动。首先，我们将按钮向负方向移动。接下来，我们将按钮移动到原始位置。然后，我们将按钮向正方向移动，最后，我们使用CSS的“keyframes”规则将按钮移回原始位置。

<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>

示例3

在下面的示例中，我们将学习如何水平和垂直地抖动按钮。我们使用’ 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>