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