在本教程中，我們將學習使用 HTML 和 CSS 在用戶懸停時搖動按鈕。創建搖動按鈕可以使應用程序的用戶體驗更具吸引力。
我們需要使用 CSS“關鍵幀”規則創建自定義動畫來搖動任何 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”替換為數字來重復動畫。
Example
的中文翻譯為：
示例
在下面的示例中，我們垂直搖動按鈕。我們使用“button”標簽創建了普通的 HTML 按鈕，并給出了“btn”類名稱。我們使用類名訪問該按鈕并設置其樣式。
在 CSS 中，我們使用“animation”屬性在用戶懸停按鈕時向按鈕添加“晃動”關鍵幀。在“搖動”關鍵幀中，我們在 0% 的動畫時間將按鈕旋轉“0 度”，在 20% 的時間旋轉“5 度”，在 50% 的時間旋轉按鈕“0 度”，在 50% 的時間旋轉按鈕“5 度” 70% 的時間為“0 度”，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>
登錄后復制
Example
的中文翻譯為：
示例
在下面的示例中，我們使用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>
登錄后復制
Example
的中文翻譯為：
示例
在下面的示例中，我們將學習如何水平和垂直地搖晃按鈕。我們使用‘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>
登錄后復制
結論
在本教程中，用戶學會了只使用CSS來抖動HTML按鈕。在第一個示例中，我們學會了垂直抖動按鈕。在第二個示例中，我們學會了水平抖動按鈕；在最后一個示例中，我們學會了水平和垂直方向上抖動按鈕。
以上就是使用HTML和CSS在懸停時抖動按鈕的詳細內容，更多請關注www.92cms.cn其它相關文章！
