weatherr

Running

App Files Files Community

mikuyyds commited on Mar 25, 2025

Commit

8fdb1bc

verified ·

1 Parent(s): aff3957

Upload enhanced-weather-cards.html

Browse files

Files changed (1) hide show

enhanced-weather-cards.html +1454 -0

enhanced-weather-cards.html ADDED Viewed

	@@ -0,0 +1,1454 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apple 风格天气卡片 - 增强版</title>
+    <style>
+        :root {
+            --card-width: 280px;
+            --card-height: 400px;
+            --card-radius: 24px;
+            --primary-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            /* 深色模式变量 */
+            --bg-color: #000;
+            --text-color: #fff;
+            --card-bg-wind: linear-gradient(135deg, #2c3e50, #1a2530);
+            --card-bg-rain: linear-gradient(135deg, #1a2a3a, #0d1520);
+            --card-bg-sunny: linear-gradient(135deg, #1e3c72, #2a5298);
+            --card-bg-snow: linear-gradient(135deg, #243949, #141e30);
+            --header-gradient: linear-gradient(90deg, #64b5f6, #e0f7fa);
+            --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            --btn-bg: rgba(255, 255, 255, 0.1);
+            --btn-hover: rgba(255, 255, 255, 0.2);
+            --btn-active: linear-gradient(135deg, #64b5f6, #1976d2);
+            --detail-bg: rgba(0, 0, 0, 0.3);
+            --secondary-text: #aaa;
+            --card-border: none;
+        }
+        /* 浅色模式变量 */
+        [data-theme="light"] {
+            --bg-color: #f5f7fa;
+            --text-color: #333;
+            --card-bg-wind: linear-gradient(135deg, #e0f7fa, #b3e5fc);
+            --card-bg-rain: linear-gradient(135deg, #cfd8dc, #b0bec5);
+            --card-bg-sunny: linear-gradient(135deg, #ffecb3, #ffe082);
+            --card-bg-snow: linear-gradient(135deg, #e8eaf6, #c5cae9);
+            --header-gradient: linear-gradient(90deg, #1976d2, #2196f3);
+            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            --btn-bg: rgba(0, 0, 0, 0.05);
+            --btn-hover: rgba(0, 0, 0, 0.1);
+            --btn-active: linear-gradient(135deg, #1976d2, #64b5f6);
+            --detail-bg: rgba(255, 255, 255, 0.7);
+            --secondary-text: #666;
+            --card-border: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+        body {
+            font-family: var(--primary-font);
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            overflow-x: hidden;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            width: 100%;
+            position: relative;
+        }
+        .header h1 {
+            font-size: 36px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            background: var(--header-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 30px rgba(100, 181, 246, 0.3);
+        }
+        .header p {
+            font-size: 18px;
+            color: var(--secondary-text);
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        /* 主题切换开关 */
+        .theme-switch-wrapper {
+            position: absolute;
+            top: 0;
+            right: 20px;
+            display: flex;
+            align-items: center;
+        }
+        .theme-switch {
+            display: inline-block;
+            height: 34px;
+            position: relative;
+            width: 60px;
+        }
+        .theme-switch input {
+            display: none;
+        }
+        .slider {
+            background-color: #ccc;
+            bottom: 0;
+            cursor: pointer;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            transition: .4s;
+            border-radius: 34px;
+        }
+        .slider:before {
+            background-color: white;
+            bottom: 4px;
+            content: "";
+            height: 26px;
+            left: 4px;
+            position: absolute;
+            transition: .4s;
+            width: 26px;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: #2196F3;
+        }
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+        .slider-icons {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 8px;
+            box-sizing: border-box;
+            pointer-events: none;
+        }
+        .slider-icons span {
+            font-size: 14px;
+        }
+        /* 温度单位切换 */
+        .temp-unit-toggle {
+            position: absolute;
+            top: 0;
+            left: 20px;
+            background: var(--btn-bg);
+            border-radius: 20px;
+            padding: 5px 15px;
+            cursor: pointer;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--text-color);
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+        .temp-unit-toggle:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        .controls {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 30px;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+        .control-btn {
+            background: var(--btn-bg);
+            border: none;
+            color: var(--text-color);
+            padding: 12px 24px;
+            border-radius: 50px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .control-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        .control-btn.active {
+            background: var(--btn-active);
+            box-shadow: 0 5px 15px rgba(25, 118, 210, 0.4);
+        }
+        .cards-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 30px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .weather-card {
+            width: var(--card-width);
+            height: var(--card-height);
+            border-radius: var(--card-radius);
+            overflow: hidden;
+            position: relative;
+            box-shadow: var(--card-shadow);
+            transition: transform 0.5s ease, box-shadow 0.5s ease, height 0.5s ease;
+            display: flex;
+            flex-direction: column;
+            border: var(--card-border);
+            cursor: pointer;
+        }
+        .weather-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
+        }
+        .weather-card.expanded {
+            height: 500px;
+            z-index: 10;
+        }
+        .card-header {
+            padding: 25px;
+            display: flex;
+            flex-direction: column;
+            z-index: 2;
+        }
+        .location {
+            font-size: 22px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+        }
+        .location-icon {
+            margin-right: 8px;
+            opacity: 0.7;
+        }
+        .date {
+            font-size: 14px;
+            color: var(--secondary-text);
+            margin-bottom: 20px;
+        }
+        .temperature {
+            font-size: 48px;
+            font-weight: 700;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        .temperature:hover {
+            transform: scale(1.05);
+        }
+        .temperature span {
+            font-size: 24px;
+            margin-left: 5px;
+            font-weight: 400;
+        }
+        .weather-type {
+            font-size: 18px;
+            color: var(--text-color);
+            opacity: 0.9;
+        }
+        .card-content {
+            flex: 1;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: flex-end;
+        }
+        .weather-details {
+            width: 100%;
+            padding: 20px;
+            background: var(--detail-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            z-index: 2;
+            display: flex;
+            justify-content: space-between;
+        }
+        .detail {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            transition: transform 0.3s ease;
+            cursor: pointer;
+        }
+        .detail:hover {
+            transform: translateY(-5px);
+        }
+        .detail-label {
+            font-size: 12px;
+            color: var(--secondary-text);
+            margin-bottom: 5px;
+        }
+        .detail-value {
+            font-size: 16px;
+            font-weight: 600;
+        }
+        /* 扩展内容 */
+        .expanded-content {
+            height: 0;
+            overflow: hidden;
+            transition: height 0.5s ease;
+            background: var(--detail-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            padding: 0 20px;
+            opacity: 0;
+        }
+        .weather-card.expanded .expanded-content {
+            height: 100px;
+            opacity: 1;
+            padding: 20px;
+        }
+        .hourly-forecast {
+            display: flex;
+            justify-content: space-between;
+            overflow-x: auto;
+            padding-bottom: 10px;
+        }
+        .hourly-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-width: 50px;
+        }
+        .hourly-time {
+            font-size: 12px;
+            color: var(--secondary-text);
+            margin-bottom: 5px;
+        }
+        .hourly-temp {
+            font-size: 14px;
+            font-weight: 600;
+        }
+        .hourly-icon {
+            font-size: 18px;
+            margin: 5px 0;
+        }
+        /* 风天气特效 */
+        .wind-card {
+            background: var(--card-bg-wind);
+        }
+        .cloud {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 50%;
+            z-index: 1;
+            opacity: 0.7;
+            filter: blur(5px);
+        }
+        .wind-line {
+            position: absolute;
+            height: 2px;
+            background: rgba(255, 255, 255, 0.3);
+            z-index: 1;
+            transform-origin: left center;
+        }
+        .tree {
+            position: absolute;
+            bottom: 70px;
+            width: 10px;
+            height: 60px;
+            background: #3d2817;
+            z-index: 1;
+        }
+        .tree::after {
+            content: '';
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: #2d5f3d;
+            border-radius: 50%;
+            top: -30px;
+            left: -25px;
+            transform-origin: center bottom;
+        }
+        /* 雨天特效 */
+        .rain-card {
+            background: var(--card-bg-rain);
+        }
+        .raindrop {
+            position: absolute;
+            width: 2px;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
+            z-index: 1;
+            border-radius: 50%;
+        }
+        .puddle {
+            position: absolute;
+            bottom: 80px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            transform: scaleY(0.3);
+            filter: blur(2px);
+            z-index: 1;
+        }
+        .ripple {
+            position: absolute;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            opacity: 1;
+            z-index: 1;
+        }
+        /* 晴天特效 */
+        .sunny-card {
+            background: var(--card-bg-sunny);
+        }
+        .sun {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            background: radial-gradient(circle, #ffeb3b, #ff9800);
+            border-radius: 50%;
+            top: 60px;
+            right: 30px;
+            box-shadow: 0 0 40px #ff9800, 0 0 80px #ffeb3b;
+            z-index: 1;
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .sun:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 60px #ff9800, 0 0 100px #ffeb3b;
+        }
+        .sun-ray {
+            position: absolute;
+            background: linear-gradient(to right, rgba(255, 235, 59, 0), rgba(255, 235, 59, 0.8), rgba(255, 235, 59, 0));
+            height: 2px;
+            transform-origin: left center;
+            z-index: 1;
+            opacity: 0.7;
+        }
+        /* 雪天特效 */
+        .snow-card {
+            background: var(--card-bg-snow);
+        }
+        .snowflake {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: white;
+            border-radius: 50%;
+            filter: blur(1px);
+            z-index: 1;
+            opacity: 0.8;
+        }
+        .snow-ground {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 40px;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
+            z-index: 1;
+        }
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .cards-container {
+                flex-direction: column;
+                align-items: center;
+            }
+            .weather-card {
+                width: 100%;
+                max-width: var(--card-width);
+            }
+            .header h1 {
+                font-size: 28px;
+            }
+            .header p {
+                font-size: 16px;
+            }
+            .theme-switch-wrapper, .temp-unit-toggle {
+                position: relative;
+                top: 0;
+                right: 0;
+                left: 0;
+                margin: 10px auto;
+            }
+        }
+        /* 动画效果 */
+        @keyframes float {
+            0%, 100% { transform: translateY(0) translateX(0); }
+            50% { transform: translateY(-15px) translateX(10px); }
+        }
+        @keyframes sway {
+            0%, 100% { transform: rotate(-5deg); }
+            50% { transform: rotate(5deg); }
+        }
+        @keyframes fall {
+            0% { transform: translateY(-10px); opacity: 0; }
+            10% { opacity: 1; }
+            100% { transform: translateY(200px); opacity: 0.7; }
+        }
+        @keyframes rippleEffect {
+            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
+            100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.1); opacity: 0.8; }
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        @keyframes snowfall {
+            0% { transform: translateY(-10px) translateX(0); opacity: 0; }
+            10% { opacity: 1; }
+            100% { transform: translateY(300px) translateX(20px); opacity: 0.6; }
+        }
+        /* 过渡效果 */
+        .fade-in {
+            animation: fadeIn 0.5s ease forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* 苹果风格的磨砂玻璃效果 */
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        /* 天气图标 */
+        .weather-icon {
+            position: absolute;
+            top: 25px;
+            right: 25px;
+            font-size: 30px;
+            z-index: 2;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        .weather-icon:hover {
+            transform: scale(1.2) rotate(10deg);
+        }
+        /* 底部版权信息 */
+        .footer {
+            margin-top: 50px;
+            text-align: center;
+            color: var(--secondary-text);
+            font-size: 14px;
+            width: 100%;
+        }
+        .footer a {
+            color: #64b5f6;
+            text-decoration: none;
+        }
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        /* 交互提示 */
+        .interaction-hint {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 8px;
+            font-size: 12px;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: 100;
+        }
+        /* 动画控制按钮 */
+        .animation-controls {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            z-index: 3;
+            display: flex;
+            gap: 5px;
+        }
+        .animation-btn {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+        .animation-btn:hover {
+            background: rgba(255, 255, 255, 0.4);
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Apple 风格天气卡片</h1>
+        <p>精美动画展示不同天气状况，体验苹果级别的设计美学</p>
+        <!-- 主题切换开关 -->
+        <div class="theme-switch-wrapper">
+            <label class="theme-switch" for="checkbox">
+                <input type="checkbox" id="checkbox" />
+                <div class="slider">
+                    <div class="slider-icons">
+                        <span>🌙</span>
+                        <span>☀️</span>
+                    </div>
+                </div>
+            </label>
+        </div>
+        <!-- 温度单位切换 -->
+        <div class="temp-unit-toggle" id="temp-unit-toggle">°C</div>
+    </div>
+    <div class="controls">
+        <button class="control-btn active" data-weather="all">全部显示</button>
+        <button class="control-btn" data-weather="wind">大风</button>
+        <button class="control-btn" data-weather="rain">降雨</button>
+        <button class="control-btn" data-weather="sunny">晴天</button>
+        <button class="control-btn" data-weather="snow">降雪</button>
+    </div>
+    <div class="cards-container">
+        <!-- 风天气卡片 -->
+        <div class="weather-card wind-card" data-type="wind">
+            <div class="card-header">
+                <div class="location"><span class="location-icon">📍</span>北京</div>
+                <div class="date">周一, 3月25日</div>
+                <div class="temperature" data-celsius="16">16<span class="temp-unit">°C</span></div>
+                <div class="weather-type">大风</div>
+                <div class="weather-icon">💨</div>
+            </div>
+            <div class="card-content" id="wind-animation">
+                <!-- 动态生成云朵和风线 -->
+                <div class="tree" id="tree1"></div>
+                <div class="tree" id="tree2"></div>
+                <!-- 动画控制按钮 -->
+                <div class="animation-controls">
+                    <button class="animation-btn" data-action="pause">⏸️</button>
+                    <button class="animation-btn" data-action="play">▶️</button>
+                </div>
+            </div>
+            <div class="weather-details">
+                <div class="detail" data-info="风速信息">
+                    <div class="detail-label">风速</div>
+                    <div class="detail-value">28 km/h</div>
+                </div>
+                <div class="detail" data-info="湿度信息">
+                    <div class="detail-label">湿度</div>
+                    <div class="detail-value">45%</div>
+                </div>
+                <div class="detail" data-info="气压信息">
+                    <div class="detail-label">气压</div>
+                    <div class="detail-value">1012 hPa</div>
+                </div>
+            </div>
+            <div class="expanded-content">
+                <div class="hourly-forecast">
+                    <div class="hourly-item">
+                        <div class="hourly-time">现在</div>
+                        <div class="hourly-icon">💨</div>
+                        <div class="hourly-temp">16°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">14:00</div>
+                        <div class="hourly-icon">💨</div>
+                        <div class="hourly-temp">17°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">15:00</div>
+                        <div class="hourly-icon">💨</div>
+                        <div class="hourly-temp">17°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">16:00</div>
+                        <div class="hourly-icon">💨</div>
+                        <div class="hourly-temp">16°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">17:00</div>
+                        <div class="hourly-icon">💨</div>
+                        <div class="hourly-temp">15°</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 雨天卡片 -->
+        <div class="weather-card rain-card" data-type="rain">
+            <div class="card-header">
+                <div class="location"><span class="location-icon">📍</span>上海</div>
+                <div class="date">周一, 3月25日</div>
+                <div class="temperature" data-celsius="14">14<span class="temp-unit">°C</span></div>
+                <div class="weather-type">中雨</div>
+                <div class="weather-icon">🌧️</div>
+            </div>
+            <div class="card-content" id="rain-animation">
+                <!-- 动态生成雨滴和水洼 -->
+                <!-- 动画控制按钮 -->
+                <div class="animation-controls">
+                    <button class="animation-btn" data-action="pause">⏸️</button>
+                    <button class="animation-btn" data-action="play">▶️</button>
+                </div>
+            </div>
+            <div class="weather-details">
+                <div class="detail" data-info="风速信息">
+                    <div class="detail-label">风速</div>
+                    <div class="detail-value">12 km/h</div>
+                </div>
+                <div class="detail" data-info="湿度信息">
+                    <div class="detail-label">湿度</div>
+                    <div class="detail-value">85%</div>
+                </div>
+                <div class="detail" data-info="降水量信息">
+                    <div class="detail-label">降水量</div>
+                    <div class="detail-value">8.2 mm</div>
+                </div>
+            </div>
+            <div class="expanded-content">
+                <div class="hourly-forecast">
+                    <div class="hourly-item">
+                        <div class="hourly-time">现在</div>
+                        <div class="hourly-icon">🌧️</div>
+                        <div class="hourly-temp">14°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">14:00</div>
+                        <div class="hourly-icon">🌧️</div>
+                        <div class="hourly-temp">14°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">15:00</div>
+                        <div class="hourly-icon">🌧️</div>
+                        <div class="hourly-temp">13°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">16:00</div>
+                        <div class="hourly-icon">🌦️</div>
+                        <div class="hourly-temp">13°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">17:00</div>
+                        <div class="hourly-icon">🌦️</div>
+                        <div class="hourly-temp">12°</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 晴天卡片 -->
+        <div class="weather-card sunny-card" data-type="sunny">
+            <div class="card-header">
+                <div class="location"><span class="location-icon">📍</span>深圳</div>
+                <div class="date">周一, 3月25日</div>
+                <div class="temperature" data-celsius="28">28<span class="temp-unit">°C</span></div>
+                <div class="weather-type">晴天</div>
+                <div class="weather-icon">☀️</div>
+            </div>
+            <div class="card-content" id="sunny-animation">
+                <div class="sun"></div>
+                <!-- 动态生成阳光射线 -->
+                <!-- 动画控制按钮 -->
+                <div class="animation-controls">
+                    <button class="animation-btn" data-action="pause">⏸️</button>
+                    <button class="animation-btn" data-action="play">▶️</button>
+                </div>
+            </div>
+            <div class="weather-details">
+                <div class="detail" data-info="风速信息">
+                    <div class="detail-label">风速</div>
+                    <div class="detail-value">5 km/h</div>
+                </div>
+                <div class="detail" data-info="湿度信息">
+                    <div class="detail-label">湿度</div>
+                    <div class="detail-value">30%</div>
+                </div>
+                <div class="detail" data-info="紫外线信息">
+                    <div class="detail-label">紫外线</div>
+                    <div class="detail-value">很强</div>
+                </div>
+            </div>
+            <div class="expanded-content">
+                <div class="hourly-forecast">
+                    <div class="hourly-item">
+                        <div class="hourly-time">现在</div>
+                        <div class="hourly-icon">☀️</div>
+                        <div class="hourly-temp">28°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">14:00</div>
+                        <div class="hourly-icon">☀️</div>
+                        <div class="hourly-temp">29°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">15:00</div>
+                        <div class="hourly-icon">☀️</div>
+                        <div class="hourly-temp">30°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">16:00</div>
+                        <div class="hourly-icon">☀️</div>
+                        <div class="hourly-temp">29°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">17:00</div>
+                        <div class="hourly-icon">🌤️</div>
+                        <div class="hourly-temp">27°</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 雪天卡片 -->
+        <div class="weather-card snow-card" data-type="snow">
+            <div class="card-header">
+                <div class="location"><span class="location-icon">📍</span>哈尔滨</div>
+                <div class="date">周一, 3月25日</div>
+                <div class="temperature" data-celsius="-5">-5<span class="temp-unit">°C</span></div>
+                <div class="weather-type">小雪</div>
+                <div class="weather-icon">❄️</div>
+            </div>
+            <div class="card-content" id="snow-animation">
+                <!-- 动态生成雪花 -->
+                <div class="snow-ground"></div>
+                <!-- 动画控制按钮 -->
+                <div class="animation-controls">
+                    <button class="animation-btn" data-action="pause">⏸️</button>
+                    <button class="animation-btn" data-action="play">▶️</button>
+                </div>
+            </div>
+            <div class="weather-details">
+                <div class="detail" data-info="风速信息">
+                    <div class="detail-label">风速</div>
+                    <div class="detail-value">8 km/h</div>
+                </div>
+                <div class="detail" data-info="湿度信息">
+                    <div class="detail-label">湿度</div>
+                    <div class="detail-value">78%</div>
+                </div>
+                <div class="detail" data-info="能见度信息">
+                    <div class="detail-label">能见度</div>
+                    <div class="detail-value">2.5 km</div>
+                </div>
+            </div>
+            <div class="expanded-content">
+                <div class="hourly-forecast">
+                    <div class="hourly-item">
+                        <div class="hourly-time">现在</div>
+                        <div class="hourly-icon">❄️</div>
+                        <div class="hourly-temp">-5°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">14:00</div>
+                        <div class="hourly-icon">❄️</div>
+                        <div class="hourly-temp">-4°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">15:00</div>
+                        <div class="hourly-icon">❄️</div>
+                        <div class="hourly-temp">-4°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">16:00</div>
+                        <div class="hourly-icon">🌨️</div>
+                        <div class="hourly-temp">-6°</div>
+                    </div>
+                    <div class="hourly-item">
+                        <div class="hourly-time">17:00</div>
+                        <div class="hourly-icon">🌨️</div>
+                        <div class="hourly-temp">-7°</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 交互提示 -->
+    <div class="interaction-hint" id="interaction-hint"></div>
+    <div class="footer">
+        <p>© 2025 Apple 风格天气卡片 | 设计与开发：苹果前端工程师</p>
+    </div>
+    <script>
+        // 初始化所有天气动画
+        document.addEventListener('DOMContentLoaded', function() {
+            // 初始化动画
+            initWindAnimation();
+            initRainAnimation();
+            initSunnyAnimation();
+            initSnowAnimation();
+            // 设置控制按钮事件
+            setupControlButtons();
+            // 设置主题切换
+            setupThemeToggle();
+            // 设置温度单位切换
+            setupTempUnitToggle();
+            // 设置卡片交互
+            setupCardInteractions();
+            // 设置动画控制
+            setupAnimationControls();
+            // 设置交互提示
+            setupInteractionHints();
+        });
+        // 设置控制按钮
+        function setupControlButtons() {
+            const buttons = document.querySelectorAll('.control-btn');
+            const cards = document.querySelectorAll('.weather-card');
+            buttons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // 移除所有按钮的active类
+                    buttons.forEach(btn => btn.classList.remove('active'));
+                    // 给当前按钮添加active类
+                    this.classList.add('active');
+                    const weatherType = this.getAttribute('data-weather');
+                    // 显示或隐藏卡片
+                    cards.forEach(card => {
+                        if (weatherType === 'all' || card.getAttribute('data-type') === weatherType) {
+                            card.style.display = 'flex';
+                            // 添加淡入动画
+                            card.classList.add('fade-in');
+                        } else {
+                            card.style.display = 'none';
+                        }
+                    });
+                });
+            });
+        }
+        // 设置主题切换
+        function setupThemeToggle() {
+            const themeToggle = document.getElementById('checkbox');
+            // 检查本地存储中的主题设置
+            const currentTheme = localStorage.getItem('theme');
+            if (currentTheme === 'light') {
+                document.documentElement.setAttribute('data-theme', 'light');
+                themeToggle.checked = true;
+            }
+            themeToggle.addEventListener('change', function() {
+                if (this.checked) {
+                    document.documentElement.setAttribute('data-theme', 'light');
+                    localStorage.setItem('theme', 'light');
+                } else {
+                    document.documentElement.removeAttribute('data-theme');
+                    localStorage.setItem('theme', 'dark');
+                }
+            });
+        }
+        // 设置温度单位切换
+        function setupTempUnitToggle() {
+            const tempUnitToggle = document.getElementById('temp-unit-toggle');
+            const tempElements = document.querySelectorAll('.temperature');
+            const tempUnitElements = document.querySelectorAll('.temp-unit');
+            const hourlyTempElements = document.querySelectorAll('.hourly-temp');
+            let isCelsius = true;
+            tempUnitToggle.addEventListener('click', function() {
+                isCelsius = !isCelsius;
+                if (isCelsius) {
+                    tempUnitToggle.textContent = '°C';
+                    tempUnitElements.forEach(el => el.textContent = '°C');
+                    // 转换温度显示
+                    tempElements.forEach(el => {
+                        const celsius = parseFloat(el.getAttribute('data-celsius'));
+                        el.childNodes[0].nodeValue = celsius;
+                    });
+                    // 转换小时预报温度
+                    hourlyTempElements.forEach(el => {
+                        const tempText = el.textContent;
+                        const fahrenheit = parseFloat(tempText);
+                        if (!isNaN(fahrenheit) && tempText.includes('°F')) {
+                            const celsius = Math.round((fahrenheit - 32) * 5 / 9);
+                            el.textContent = `${celsius}°`;
+                        }
+                    });
+                } else {
+                    tempUnitToggle.textContent = '°F';
+                    tempUnitElements.forEach(el => el.textContent = '°F');
+                    // 转换温度显示
+                    tempElements.forEach(el => {
+                        const celsius = parseFloat(el.getAttribute('data-celsius'));
+                        const fahrenheit = Math.round(celsius * 9 / 5 + 32);
+                        el.childNodes[0].nodeValue = fahrenheit;
+                    });
+                    // 转换小时预报温度
+                    hourlyTempElements.forEach(el => {
+                        const tempText = el.textContent;
+                        const celsius = parseFloat(tempText);
+                        if (!isNaN(celsius) && !tempText.includes('°F')) {
+                            const fahrenheit = Math.round(celsius * 9 / 5 + 32);
+                            el.textContent = `${fahrenheit}°F`;
+                        }
+                    });
+                }
+                // 添加动画效果
+                tempUnitToggle.classList.add('fade-in');
+                setTimeout(() => {
+                    tempUnitToggle.classList.remove('fade-in');
+                }, 500);
+            });
+        }
+        // 设置卡片交互
+        function setupCardInteractions() {
+            const cards = document.querySelectorAll('.weather-card');
+            cards.forEach(card => {
+                card.addEventListener('click', function() {
+                    // 切换展开状态
+                    this.classList.toggle('expanded');
+                });
+                // 温度点击事件
+                const tempElement = card.querySelector('.temperature');
+                tempElement.addEventListener('click', function(e) {
+                    e.stopPropagation(); // 阻止冒泡到卡片
+                    // 添加脉动动画
+                    this.style.animation = 'pulse 0.5s ease';
+                    setTimeout(() => {
+                        this.style.animation = '';
+                    }, 500);
+                });
+                // 天气图标点击事件
+                const weatherIcon = card.querySelector('.weather-icon');
+                weatherIcon.addEventListener('click', function(e) {
+                    e.stopPropagation(); // 阻止冒泡到卡片
+                    // 随机旋转角度
+                    const rotation = Math.random() * 40 - 20;
+                    this.style.transform = `scale(1.3) rotate(${rotation}deg)`;
+                    setTimeout(() => {
+                        this.style.transform = '';
+                    }, 500);
+                });
+                // 太阳点击事件（仅晴天卡片）
+                if (card.classList.contains('sunny-card')) {
+                    const sun = card.querySelector('.sun');
+                    if (sun) {
+                        sun.addEventListener('click', function(e) {
+                            e.stopPropagation(); // 阻止冒泡到卡片
+                            // 增强太阳光芒
+                            this.style.boxShadow = '0 0 80px #ff9800, 0 0 120px #ffeb3b';
+                            setTimeout(() => {
+                                this.style.boxShadow = '';
+                            }, 1000);
+                        });
+                    }
+                }
+            });
+        }
+        // 设置动画控制
+        function setupAnimationControls() {
+            const animationButtons = document.querySelectorAll('.animation-btn');
+            animationButtons.forEach(button => {
+                button.addEventListener('click', function(e) {
+                    e.stopPropagation(); // 阻止冒泡到卡片
+                    const action = this.getAttribute('data-action');
+                    const container = this.closest('.card-content');
+                    if (action === 'pause') {
+                        // 暂停所有动画
+                        const animatedElements = container.querySelectorAll('*');
+                        animatedElements.forEach(el => {
+                            el.style.animationPlayState = 'paused';
+                        });
+                    } else if (action === 'play') {
+                        // 恢复所有动画
+                        const animatedElements = container.querySelectorAll('*');
+                        animatedElements.forEach(el => {
+                            el.style.animationPlayState = 'running';
+                        });
+                    }
+                });
+            });
+        }
+        // 设置交互提示
+        function setupInteractionHints() {
+            const hintElement = document.getElementById('interaction-hint');
+            const interactiveElements = document.querySelectorAll('[data-info]');
+            interactiveElements.forEach(element => {
+                element.addEventListener('mouseenter', function() {
+                    const info = this.getAttribute('data-info');
+                    hintElement.textContent = info;
+                    hintElement.style.opacity = '1';
+                    // 设置提示位置
+                    const rect = this.getBoundingClientRect();
+                    hintElement.style.top = `${rect.top - 30}px`;
+                    hintElement.style.left = `${rect.left + rect.width / 2}px`;
+                    hintElement.style.transform = 'translateX(-50%)';
+                });
+                element.addEventListener('mouseleave', function() {
+                    hintElement.style.opacity = '0';
+                });
+            });
+        }
+        // 风天气动画
+        function initWindAnimation() {
+            const windContainer = document.getElementById('wind-animation');
+            const tree1 = document.getElementById('tree1');
+            const tree2 = document.getElementById('tree2');
+            // 设置树的位置
+            tree1.style.left = '60px';
+            tree2.style.left = '180px';
+            // 添加树摇摆动画
+            tree1.style.animation = 'sway 3s ease-in-out infinite';
+            tree2.style.animation = 'sway 4s ease-in-out infinite';
+            // 创建云朵
+            for (let i = 0; i < 5; i++) {
+                createCloud(windContainer);
+            }
+            // 创建风线
+            for (let i = 0; i < 15; i++) {
+                createWindLine(windContainer);
+            }
+            // 每隔一段时间创建新的风线
+            setInterval(() => {
+                createWindLine(windContainer);
+            }, 300);
+        }
+        // 创建云朵
+        function createCloud(container) {
+            const cloud = document.createElement('div');
+            cloud.className = 'cloud';
+            // 随机大小和位置
+            const size = Math.random() * 50 + 30;
+            const top = Math.random() * 150;
+            const left = Math.random() * 200;
+            cloud.style.width = `${size}px`;
+            cloud.style.height = `${size * 0.6}px`;
+            cloud.style.top = `${top}px`;
+            cloud.style.left = `${left}px`;
+            // 添加浮动动画
+            const duration = Math.random() * 10 + 10;
+            cloud.style.animation = `float ${duration}s ease-in-out infinite`;
+            container.appendChild(cloud);
+        }
+        // 创建风线
+        function createWindLine(container) {
+            const line = document.createElement('div');
+            line.className = 'wind-line';
+            // 随机大小和位置
+            const width = Math.random() * 50 + 20;
+            const top = Math.random() * 200 + 20;
+            const left = 0;
+            const angle = Math.random() * 10 - 5;
+            line.style.width = `${width}px`;
+            line.style.top = `${top}px`;
+            line.style.left = `${left}px`;
+            line.style.transform = `rotate(${angle}deg)`;
+            // 添加动画
+            line.style.animation = 'fadeIn 1s forwards';
+            container.appendChild(line);
+            // 一段时间后移除
+            setTimeout(() => {
+                line.remove();
+            }, 1000);
+        }
+        // 雨天动画
+        function initRainAnimation() {
+            const rainContainer = document.getElementById('rain-animation');
+            // 创建水洼
+            for (let i = 0; i < 5; i++) {
+                createPuddle(rainContainer);
+            }
+            // 持续创建雨滴
+            setInterval(() => {
+                createRaindrop(rainContainer);
+            }, 50);
+        }
+        // 创建雨滴
+        function createRaindrop(container) {
+            const raindrop = document.createElement('div');
+            raindrop.className = 'raindrop';
+            // 随机位置和大小
+            const height = Math.random() * 20 + 10;
+            const left = Math.random() * 280;
+            raindrop.style.height = `${height}px`;
+            raindrop.style.left = `${left}px`;
+            raindrop.style.top = '0';
+            // 添加下落动画
+            const duration = Math.random() * 0.5 + 0.5;
+            raindrop.style.animation = `fall ${duration}s linear`;
+            container.appendChild(raindrop);
+            // 雨滴落地后创建涟漪并移除雨滴
+            setTimeout(() => {
+                createRipple(container, left, 200);
+                raindrop.remove();
+            }, duration * 1000);
+        }
+        // 创建水洼
+        function createPuddle(container) {
+            const puddle = document.createElement('div');
+            puddle.className = 'puddle';
+            // 随机大小和位置
+            const size = Math.random() * 60 + 40;
+            const left = Math.random() * 200 + 40;
+            puddle.style.width = `${size}px`;
+            puddle.style.height = `${size}px`;
+            puddle.style.left = `${left}px`;
+            container.appendChild(puddle);
+        }
+        // 创建涟漪
+        function createRipple(container, x, y) {
+            const ripple = document.createElement('div');
+            ripple.className = 'ripple';
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+            ripple.style.animation = 'rippleEffect 1s linear';
+            container.appendChild(ripple);
+            // 动画结束后移除
+            setTimeout(() => {
+                ripple.remove();
+            }, 1000);
+        }
+        // 晴天动画
+        function initSunnyAnimation() {
+            const sunnyContainer = document.getElementById('sunny-animation');
+            const sun = sunnyContainer.querySelector('.sun');
+            // 添加太阳脉动动画
+            sun.style.animation = 'pulse 4s ease-in-out infinite';
+            // 创建阳光射线
+            for (let i = 0; i < 12; i++) {
+                createSunRay(sunnyContainer, i * 30);
+            }
+        }
+        // 创建阳光射线
+        function createSunRay(container, angle) {
+            const ray = document.createElement('div');
+            ray.className = 'sun-ray';
+            // 设置射线属性
+            const length = Math.random() * 100 + 100;
+            ray.style.width = `${length}px`;
+            ray.style.top = '100px';
+            ray.style.right = '70px';
+            ray.style.transform = `rotate(${angle}deg)`;
+            // 添加动画
+            const duration = Math.random() * 3 + 3;
+            ray.style.animation = `pulse ${duration}s ease-in-out infinite`;
+            container.appendChild(ray);
+        }
+        // 雪天动画
+        function initSnowAnimation() {
+            const snowContainer = document.getElementById('snow-animation');
+            // 持续创建雪花
+            setInterval(() => {
+                createSnowflake(snowContainer);
+            }, 100);
+        }
+        // 创建雪花
+        function createSnowflake(container) {
+            const snowflake = document.createElement('div');
+            snowflake.className = 'snowflake';
+            // 随机大小和位置
+            const size = Math.random() * 6 + 2;
+            const left = Math.random() * 280;
+            snowflake.style.width = `${size}px`;
+            snowflake.style.height = `${size}px`;
+            snowflake.style.left = `${left}px`;
+            snowflake.style.top = '0';
+            // 添加下落动画
+            const duration = Math.random() * 5 + 5;
+            snowflake.style.animation = `snowfall ${duration}s linear`;
+            container.appendChild(snowflake);
+            // 动画结束后移除
+            setTimeout(() => {
+                snowflake.remove();
+            }, duration * 1000);
+        }
+    </script>
+</body>
+</html>