9.1 懸停動畫效果 (Hover Effects)
動畫在提升網站用户体验 (UX) 中扮演重要角色。它們可以引導用户注意，提供反馈，改善導航，使介面更加直观和易於使用。現在我們來看看一些用動畫改進UX的例子。
例子：按钮懸停動畫
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按鈕懸停動畫</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #2980b9;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="button">Hover me</button>
</body>
</html>
代码说明：
.button: 定義按鈕的樣式，包括懸停時背景和縮放的平滑過渡.button:hover: 當鼠標懸停時，按鈕的背景顏色會改變，並稍微放大
9.2 載入動畫 (Loading Animations)
載入動畫顯示給用戶，加載或數據處理過程正在進行，這有助於減少等待的感覺。
例子：載入動畫
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>載入動畫</title>
<style>
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
代码说明：
.spinner: 定義旋轉動畫的樣式，包括邊框和旋轉動畫@keyframes spin: 定義旋轉動畫從0到360度
9.3 頁面過渡動畫 (Page Transition Animations)
页面或應用程式部分之間的過渡動畫幫助用戶定位，並創造更流暢的互動體驗。
例子：頁面過渡動畫
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁面過渡動畫</title>
<style>
.page {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.page.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="page">Content of the page</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page').classList.add('active');
});
</script>
</body>
</html>
代码说明：
.page: 定義頁面的樣式，包含初始不透明度和向下位移.page.active: 當添加active類時，頁面變得完全可見並回到初始位置- JavaScript: 當頁面加載時，為元素
.page添加active類，啟動動畫
9.4 點擊動畫 (Click Animations)
在元素上點擊的動畫可以改善用戶反饋，讓互動更加有趣。
例子：按鈕點擊動畫
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按鈕點擊動畫</title>
<style>
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
代码说明：
.button: 定義按鈕的樣式，包括縮放的平滑過渡.button:active: 當按鈕被點擊時，元素會稍微縮小，產生點擊效果
GO TO FULL VERSION