資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS建立按鈕懸停動畫效果？
CSS中的懸停動畫效果是指滑鼠指標懸停在元素上時元素外觀的變化。我們使用CSS在懸停時建立各種動畫效果，例如縮放、淡入淡出、滑動或旋轉元素。
按鈕懸停動畫效果的屬性
transform − 此屬性允許您縮放、旋轉或平移元素。
opacity − 此屬性設定元素的透明度級別，其中1表示完全可見，0表示完全透明。
background-color − 此屬性設定元素的背景顏色。
color − 此屬性設定元素的文字顏色。
transition − 此屬性控制兩種狀態（例如預設狀態和懸停狀態）之間的動畫效果。
bottom 和 top − 屬性相對於其容器定位元素。
使用CSS建立按鈕懸停動畫效果
按鈕懸停動畫是為網站新增視覺趣味的好方法。要使用CSS建立按鈕懸停動畫效果，我們通常將:hover偽類選擇器與CSS過渡或關鍵幀動畫結合使用。透過以下步驟，我們可以輕鬆建立按鈕懸停動畫效果。
步驟1 − 建立果凍球動畫的HTML程式碼
步驟2 − 向按鈕新增CSS樣式
步驟3 − 新增懸停動畫效果
在本文中，我們將探討三個使用CSS建立按鈕懸停動畫效果的示例。
示例1 - 懸停時放大
在此示例中，按鈕將具有藍色背景顏色和白色文字。當滑鼠指標位於按鈕上方時，按鈕將使用transform屬性放大20％，並在0.5秒內平滑過渡，背景顏色將變為綠色。
<!DOCTYPE html>
<html>
<head>
<style>
Body{
text-align:center;
}
.scale-up-btn {
background-color: blue;
color: white;
padding: 10px 30px;
margin:20px;
border: none;
transition: transform 0.5s ease;
transform: scale(1);
border-radius:10px;
}
.scale-up-btn:hover {
transform: scale(1.2);
background-color: green;
}
</style>
</head>
<body>
<h2>Button hover animation effect using CSS</h2>
<h3>Scale Up on Hover effect</h3>
<button class="scale-up-btn">Hover Me</button>
</body>
</html>
示例2：懸停時淡入
在此示例中，按鈕將具有藍色背景顏色和白色文字，初始不透明度為0.5。當滑鼠指標位於按鈕上方時，不透明度將在0.5秒內平滑過渡到1。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.fade-in-btn {
background-color: blue;
color: white;
padding: 10px 20px;
margin:15px;
border: none;
opacity: 0.5;
transition: opacity 0.5s ease;
}
.fade-in-btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<h2>Button hover animation effect using CSS</h2>
<h3>Fade In Effect on Hover</h3>
<button class="fade-in-btn">Hover Me</button>
</body>
</html>
示例3：懸停時向上滑動
在此示例中，按鈕將具有藍色背景顏色和白色文字，位置設定為relative。bottom屬性設定為0，表示按鈕位於其容器的底部。當滑鼠指標位於按鈕上方時，bottom屬性將增加到20px，使按鈕在0.5秒內平滑過渡向上滑動。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.slide-up-btn {
background-color: blue;
color: white;
padding: 15px 30px;
border: none;
position: relative;
bottom: 0;
transition: bottom 0.5s ease;
border-radius:10px;
}
.slide-up-btn:hover {
bottom: 20px;
}
</style>
</head>
<body>
<h3>Slide Up Effect on Hover</h3>
<button class="slide-up-btn">Hover Me</button>
</body>
</html>
結論
按鈕懸停動畫效果是為網站新增視覺趣味的好方法。使用CSS，我們可以建立動態且引人入勝的效果，使網站脫穎而出。只需幾行程式碼。
2000+ 次瀏覽
