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>
》)
