5. 动画/过渡模块 - 交互式仪表盘
案例：数据分析仪表盘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.dashboard {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f7fa;
border-radius: 10px;
}
.metric-cards {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.metric-card {
flex: 1;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.metric-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.metric-value {
font-size: 28px;
font-weight: bold;
margin: 10px 0;
color: #3498db;
}
.chart-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.progress-bar {
height: 10px;
background: #ecf0f1;
border-radius: 5px;
margin-top: 10px;
overflow: hidden;
}
.progress {
height: 100%;
width: 0;
background: linear-gradient(90deg, #3498db, #2ecc71);
border-radius: 5px;
transition: width 1.5s ease-out;
}
.dashboard.loaded .progress {
width: var(--progress);
}
.animated-number {
display: inline-block;
}
@keyframes count-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.dashboard.loaded .metric-value {
animation: count-up 1s ease-out forwards;
}
.dashboard.loaded .metric-card:nth-child(1) .metric-value {
animation-delay: 0.2s;
}
.dashboard.loaded .metric-card:nth-child(2) .metric-value {
animation-delay: 0.4s;
}
.dashboard.loaded .metric-card:nth-child(3) .metric-value {
animation-delay: 0.6s;
}
</style>
<body>
<div class="dashboard">
<h1>数据分析仪表盘</h1>
<div class="metric-cards">
<div class="metric-card">
<div class="metric-title">用户总数</div>
<div class="metric-value">1,248</div>
<div class="progress-bar">
<div class="progress" style="--progress: 75%"></div>
</div>
</div>
<div class="metric-card">
<div class="metric-title">本月增长</div>
<div class="metric-value">+124</div>
<div class="progress-bar">
<div class="progress" style="--progress: 62%"></div>
</div>
</div>
<div class="metric-card">
<div class="metric-title">活跃用户</div>
<div class="metric-value">892</div>
<div class="progress-bar">
<div class="progress" style="--progress: 89%"></div>
</div>
</div>
</div>
<div class="chart-container">
<h3>用户增长趋势</h3>
<!-- 这里可以放置图表 -->
</div>
</div>
<script>
// 模拟加载完成
setTimeout(() => {
document.querySelector('.dashboard').classList.add('loaded');
}, 500);
</script>
</body>
</html>
