当前位置：首页 > news >正文

5. 动画/过渡模块 - 交互式仪表盘

news 来源：原创 2025/5/14 5:42:49

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>