資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 HTML 和 CSS 實現懸停時按鈕抖動效果
要使用 HTML 和 CSS 實現懸停時按鈕抖動效果，我們應該對 CSS 動畫 和 關鍵幀 有基本的瞭解。我們將瞭解如何利用 CSS 動畫和關鍵幀來在懸停時為按鈕應用抖動效果。
在這篇文章中，我們有一些按鈕包含在一個 div 容器中。我們的任務是使用 HTML 和 CSS 在懸停時使按鈕抖動。
使用 HTML 和 CSS 實現懸停時按鈕抖動的步驟
要使用 HTML 和 CSS 實現懸停時按鈕抖動，我們將使用 CSS 動畫和 transform 屬性。我們將按照以下步驟使用 HTML 和 CSS 使按鈕在懸停時抖動
- 為了建立按鈕，我們使用 HTML button 標籤建立了一個按鈕，並將其包裝在一個 div 元素中，該元素的類名為 container，用於居中按鈕。
- 為了居中按鈕，我們使用了 display 和 flex 屬性，例如 justify-content 用於水平居中，align-items 用於垂直居中按鈕並設定容器的 高度。
- 為了設計按鈕，我們使用了 btn 類，它設定了 邊框、圓角、背景顏色 和文字 顏色。我們還應用了 內邊距 和使用 CSS 文字對齊 屬性對按鈕上書寫文字的對齊方式，並設定了按鈕的 字型大小。
- 我們使用了 :hover 偽類，它在懸停時設定按鈕的背景、文字顏色和動畫。
- 我們使用關鍵幀建立了一個名為 shaking 的動畫，它負責按鈕的抖動。我們使用了 rotate 函式的 transform 屬性，該函式使按鈕旋轉：在 20% 時旋轉 -5 度，在 70% 時旋轉 5 度，並在 0%、5% 和 100% 時保持其原始位置，從而產生抖動效果。
示例 1
這是一個完整的示例程式碼，實現了上述步驟，以使用 HTML 和 CSS 在懸停時使按鈕抖動。
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.btn {
text-align: center;
padding: 10px 20px;
border: 1px solid #031926;
border-radius: 5px;
background-color: #031926;
color: white;
font-size: 15px;
}
.btn:hover {
background-color: white;
color: #031926;
animation: shaking 0.3s linear 2;
}
@keyframes shaking {
0%, 50%, 100% {
transform: rotate(0deg);
}
20% {
transform: rotate(-5deg);
}
70% {
transform: rotate(5deg);
}
}
</style>
</head>
<body>
<h3>
Shaking Button on Hover using HTML and CSS
</h3>
<p>
In this example we have used CSS animations
with <strong>rotate</strong> function to
Shake a Button on Hover using HTML and CSS.
</p>
<div class="container">
<button class="btn">Submit</button>
</div>
</body>
</html>
示例 2
在這個示例中，我們建立並設計了三個按鈕，與示例 1 中的按鈕相同。第一個、第二個和第三個按鈕分別在水平、垂直和兩個方向上懸停時抖動。
- 我們為每個按鈕建立了單獨的類，它們是：translatex、translatey 和 trans_rotate。
- translatex 類建立了一個名為 shakingx 的動畫，該動畫使用 translateX 函式使按鈕在水平方向上左右抖動。
- 類似地，translatey 類建立了一個名為 shakingy 的動畫，該動畫使用 translateY 函式，而 trans_rotate 類建立了一個名為 shakingxy 的動畫，該動畫使用 translateX 和 rotate 函式使按鈕在懸停時抖動。
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
gap: 50px;
}
.btn {
text-align: center;
padding: 10px 20px;
border: 1px solid #031926;
border-radius: 5px;
background-color: #031926;
color: white;
font-size: 15px;
}
.translatex:hover {
background-color: white;
color: #031926;
animation: shakingx 0.4s linear 2;
}
@keyframes shakingx {
0%,90% {
transform: translateX(-10px);
}
20%,80% {
transform: translateX(-5px);
}
50%,70% {
transform: translateX(10px);
}
}
.translatey:hover {
background-color: white;
color: #031926;
animation: shakingy 0.4s linear 2;
}
@keyframes shakingy {
0%,90% {
transform: translateY(-10px);
}
20%,80% {
transform: translateY(-5px);
}
50%,70% {
transform: translateY(10px);
}
}
.trans_rotate:hover {
background-color: white;
color: #031926;
animation: shakingxy 0.4s linear 2;
}
@keyframes shakingxy {
0%,50%,100% {
transform: translateX(0) rotate(0deg);
}
25% {
transform: translateX(15px) rotate(7deg);
}
75% {
transform: translateX(-15px) rotate(-7deg);
}
}
</style>
</head>
<body>
<h3>
Shaking Button on Hover using HTML and CSS
</h3>
<p>
In this example, the <strong>first</strong>
button shake <strong>horizontally</strong>,
the <strong>second</strong> button shake
<strong>vertically</strong>, and the <strong>
third</strong> button in <strong>both</strong>
direction.
</p>
<div class="container">
<button class="btn translatex">Submit</button>
<button class="btn translatey">Submit</button>
<button class="btn trans_rotate">Submit</button>
</div>
</body>
</html>
結論
在這篇文章中，我們瞭解瞭如何使用 HTML 和 CSS 在懸停時使按鈕抖動。我們使用 CSS 動畫和關鍵幀建立按鈕的抖動效果，以及 CSS transform 屬性的各種函式，如rotate、translateX 和translateY 函式。
更新於： 2024-09-13
4K+ 瀏覽量
廣告