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

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,248div>
		      <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">+124div>
		      <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">892div>
		      <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>

5. 动画/过渡模块 - 交互式仪表盘_第1张图片

你可能感兴趣的:(css3,html)