使用HTML和CSS在懸停時抖動按鈕
在本教學中，我們將學習使用 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 id="Shaking-the-button-vertically-using-HTML-and-CSS"> 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 id="Shaking-the-button-Horizontally-using-HTML-and-CSS"> 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 id="Shaking-the-button-Horizontally-and-vartically-using-HTML-and-CSS"> 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在懸停時抖動按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
React在HTML中的作用：增強用戶體驗
Apr 09, 2025 am 12:11 AM
React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
解決 Craft CMS 中的緩存問題：使用 wiejeben/craft-laravel-mix 插件
Apr 18, 2025 am 09:24 AM
在使用CraftCMS開發網站時，常常會遇到資源文件緩存的問題，特別是當你頻繁更新CSS和JavaScript文件時，舊版本的文件可能仍然被瀏覽器緩存，導致用戶無法及時看到最新的更改。這個問題不僅影響用戶體驗，還會增加開發和調試的難度。最近，我在項目中遇到了類似的困擾，經過一番探索，我找到了wiejeben/craft-laravel-mix這個插件，它完美地解決了我的緩存問題。
