在本教程中，我們將學(xué)習(xí)使用 HTML 和 CSS 在用戶(hù)懸停時(shí)搖動(dòng)按鈕。創(chuàng)建搖動(dòng)按鈕可以使應(yīng)用程序的用戶(hù)體驗(yàn)更具吸引力。
我們需要使用 CSS“關(guān)鍵幀”規(guī)則創(chuàng)建自定義動(dòng)畫(huà)來(lái)?yè)u動(dòng)任何 HTML 元素。之后，我們可以使用自定義關(guān)鍵幀作為“animation”CSS屬性的值，以便當(dāng)用戶(hù)將鼠標(biāo)懸停在按鈕上時(shí)搖動(dòng)按鈕。
語(yǔ)法
用戶(hù)可以按照以下語(yǔ)法使用 HTML 和 CSS 來(lái)?yè)u動(dòng)懸停按鈕。
.btn:hover {
animation: key_frame_name animation_time repetition;
}
@keyframes key_frame_name {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(10deg);
}
}
登錄后復(fù)制
在上面的語(yǔ)法中，我們創(chuàng)建了自定義 CSS 規(guī)則來(lái)向按鈕添加晃動(dòng)動(dòng)畫(huà)。用戶(hù)可以將“animation_time”替換為時(shí)間單位，并將“repetition”替換為數(shù)字來(lái)重復(fù)動(dòng)畫(huà)。
Example
的中文翻譯為：
示例
在下面的示例中，我們垂直搖動(dòng)按鈕。我們使用“button”標(biāo)簽創(chuàng)建了普通的 HTML 按鈕，并給出了“btn”類(lèi)名稱(chēng)。我們使用類(lèi)名訪(fǎng)問(wèn)該按鈕并設(shè)置其樣式。
在 CSS 中，我們使用“animation”屬性在用戶(hù)懸停按鈕時(shí)向按鈕添加“晃動(dòng)”關(guān)鍵幀。在“搖動(dòng)”關(guān)鍵幀中，我們?cè)?0% 的動(dòng)畫(huà)時(shí)間將按鈕旋轉(zhuǎn)“0 度”，在 20% 的時(shí)間旋轉(zhuǎn)“5 度”，在 50% 的時(shí)間旋轉(zhuǎn)按鈕“0 度”，在 50% 的時(shí)間旋轉(zhuǎn)按鈕“5 度” 70% 的時(shí)間為“0 度”，100% 的時(shí)間為“0 度”。
在輸出中，用戶(hù)可以觀察到按鈕在垂直方向上的晃動(dòng)。
<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>
登錄后復(fù)制
Example
的中文翻譯為：
示例
在下面的示例中，我們使用HTML和CSS水平晃動(dòng)按鈕。
我們使用了CSS屬性 ‘transform: translateX（）’ 來(lái)在水平方向上抖動(dòng)按鈕。首先，我們將按鈕向負(fù)方向移動(dòng)。接下來(lái)，我們將按鈕移動(dòng)到原始位置。然后，我們將按鈕向正方向移動(dòng)，最后，我們使用CSS的 ‘keyframes’ 規(guī)則將按鈕移動(dòng)到原始位置
<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>
登錄后復(fù)制
Example
的中文翻譯為：
示例
在下面的示例中，我們將學(xué)習(xí)如何水平和垂直地?fù)u晃按鈕。我們使用‘translateX()’和‘rotate()’一起作為‘transform’ CSS屬性的值。
‘translateX（）’將按鈕水平移動(dòng)，‘rotate（）’函數(shù)將按鈕垂直移動(dòng)。在輸出中，用戶(hù)可以觀察到當(dāng)他們懸停在按鈕上時(shí)，它會(huì)稍微水平和垂直移動(dòng)。然而，用戶(hù)可以增加‘translateX（）’函數(shù)的參數(shù)值，以在水平方向上抖動(dòng)更多。
<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>
登錄后復(fù)制
結(jié)論
在本教程中，用戶(hù)學(xué)會(huì)了只使用CSS來(lái)抖動(dòng)HTML按鈕。在第一個(gè)示例中，我們學(xué)會(huì)了垂直抖動(dòng)按鈕。在第二個(gè)示例中，我們學(xué)會(huì)了水平抖動(dòng)按鈕；在最后一個(gè)示例中，我們學(xué)會(huì)了水平和垂直方向上抖動(dòng)按鈕。
以上就是使用HTML和CSS在懸停時(shí)抖動(dòng)按鈕的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
