/* ═══════════════════════════════════════════════════════════════ season-themes.css — 四季主题联动动画系统版本: v1.0 | 2026-05-05 接入说明: 1. 在 base.html 的中，于 main.css 之后引入: 2. 给或添加 data-season 属性: 3. 季节切换时，JS 只需修改 data-season 属性，所有动画自动适配 ═══════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────── 基础：季节变量覆盖系统通过 data-season 属性覆盖全局动画速度、颜色和特效 ──────────────────────────────────────────────────────────────── */ :root { --season-anim-speed: 1; --season-particle-opacity: 0; --season-glow-color: rgba(45, 138, 94, 0.15); --season-bg-tint: transparent; } /* ═══ 春：花瓣飘落 · 柔和复苏 ═══ */ [data-season="spring"] { --season-anim-speed: 1; --season-particle-opacity: 1; --season-glow-color: rgba(255, 183, 197, 0.25); --season-bg-tint: rgba(255, 240, 245, 0.3); --season-accent: #e8a0b0; } /* ═══ 夏：加速活力 · 明亮跃动 ═══ */ [data-season="summer"] { --season-anim-speed: 1.3; --season-particle-opacity: 0; --season-glow-color: rgba(255, 200, 100, 0.2); --season-bg-tint: rgba(255, 250, 240, 0.2); --season-accent: #f0c040; } /* ═══ 秋：落叶纷飞 · 温暖沉淀 ═══ */ [data-season="autumn"] { --season-anim-speed: 0.85; --season-particle-opacity: 1; --season-glow-color: rgba(200, 145, 90, 0.25); --season-bg-tint: rgba(250, 240, 230, 0.3); --season-accent: #c8915a; } /* ═══ 冬：慢节奏 · 霜雾光晕 ═══ */ [data-season="winter"] { --season-anim-speed: 0.6; --season-particle-opacity: 0; --season-glow-color: rgba(180, 200, 220, 0.3); --season-bg-tint: rgba(240, 248, 255, 0.35); --season-accent: #a0c0d0; } /* ──────────────────────────────────────────────────────────────── 1. 全局动画速度调节所有带 .season-adaptive 的元素会自动根据季节调整动画时长 ──────────────────────────────────────────────────────────────── */ .season-adaptive { --anim-duration: calc(1s / var(--season-anim-speed, 1)); --anim-delay: calc(0.06s / var(--season-anim-speed, 1)); } /* 入场动画速度适配 */ .season-adaptive.card-float-in { animation-duration: calc(0.7s / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(1) { animation-delay: calc(0ms / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(2) { animation-delay: calc(60ms / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(3) { animation-delay: calc(120ms / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(4) { animation-delay: calc(180ms / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(5) { animation-delay: calc(240ms / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(6) { animation-delay: calc(300ms / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(7) { animation-delay: calc(360ms / var(--season-anim-speed, 1)); } .season-adaptive.card-float-in:nth-child(8) { animation-delay: calc(420ms / var(--season-anim-speed, 1)); } /* 呼吸动画速度适配 */ .season-adaptive.breathing { animation-duration: calc(3s / var(--season-anim-speed, 1)); } /* 悬停过渡速度适配 */ .season-adaptive.hover-lift { transition-duration: calc(0.3s / var(--season-anim-speed, 1)); } /* ──────────────────────────────────────────────────────────────── 2. 春：樱花花瓣飘落特效 class: .spring-petals — 在容器内生成飘落花瓣需要在元素上添加 data-season="spring" 的父级 ──────────────────────────────────────────────────────────────── */ @keyframes petalFall { 0% { transform: translateY(-10%) rotate(0deg) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.6; } 100% { transform: translateY(110%) rotate(360deg) translateX(30px); opacity: 0; } } @keyframes petalSway { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } } [data-season="spring"] .spring-petals { position: relative; overflow: hidden; } [data-season="spring"] .spring-petals::before, [data-season="spring"] .spring-petals::after { content: '🌸'; position: absolute; font-size: 14px; opacity: 0; pointer-events: none; z-index: 1; animation: petalFall 8s linear infinite, petalSway 3s ease-in-out infinite alternate; } [data-season="spring"] .spring-petals::before { left: 10%; animation-delay: 0s, 0s; animation-duration: 8s, 3s; } [data-season="spring"] .spring-petals::after { content: '🌺'; left: 70%; font-size: 12px; animation-delay: 3s, 1.5s; animation-duration: 10s, 4s; } /* 额外花瓣（通过 CSS 变量控制数量） */ [data-season="spring"] .spring-petals[data-petals="many"] { --petal-count: 5; } /* ──────────────────────────────────────────────────────────────── 3. 夏：阳光加速特效更明亮的阴影、更快的反馈、阳光折射感 ──────────────────────────────────────────────────────────────── */ [data-season="summer"] .card { box-shadow: 0 2px 12px rgba(255, 200, 100, 0.08), 0 8px 32px rgba(255, 200, 100, 0.05); } [data-season="summer"] .card:hover { box-shadow: 0 8px 32px rgba(255, 180, 80, 0.15), 0 16px 48px rgba(255, 180, 80, 0.1); } [data-season="summer"] .entry-item:hover .icon { filter: brightness(1.15); } /* 夏日阳光扫过效果 */ @keyframes sunRay { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } [data-season="summer"] .welcome-banner { position: relative; overflow: hidden; } [data-season="summer"] .welcome-banner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, transparent 40%, rgba(255, 220, 150, 0.1) 50%, transparent 60% ); background-size: 200% 100%; animation: sunRay 6s ease-in-out infinite; pointer-events: none; } /* ──────────────────────────────────────────────────────────────── 4. 秋：落叶飘落特效 class: .autumn-leaves — 在容器内生成飘落落叶 ──────────────────────────────────────────────────────────────── */ @keyframes leafFall { 0% { transform: translateY(-10%) rotate(0deg) translateX(0); opacity: 0; } 10% { opacity: 0.9; } 25% { transform: translateY(25%) rotate(45deg) translateX(15px); } 50% { transform: translateY(50%) rotate(-30deg) translateX(-10px); } 75% { transform: translateY(75%) rotate(60deg) translateX(20px); opacity: 0.7; } 100% { transform: translateY(110%) rotate(90deg) translateX(0); opacity: 0; } } [data-season="autumn"] .autumn-leaves { position: relative; overflow: hidden; } [data-season="autumn"] .autumn-leaves::before, [data-season="autumn"] .autumn-leaves::after { content: '🍂'; position: absolute; font-size: 16px; opacity: 0; pointer-events: none; z-index: 1; animation: leafFall 7s ease-in-out infinite; } [data-season="autumn"] .autumn-leaves::before { left: 15%; animation-delay: 0s; animation-duration: 7s; } [data-season="autumn"] .autumn-leaves::after { content: '🍁'; left: 60%; font-size: 14px; animation-delay: 2.5s; animation-duration: 9s; } /* 秋日暖色调覆盖 */ [data-season="autumn"] .welcome-greeting { color: #8b4513; } [data-season="autumn"] .entry-item:hover { border-color: rgba(200, 145, 90, 0.3); } /* ──────────────────────────────────────────────────────────────── 5. 冬：霜雾光晕 · 慢节奏冷色调光晕、缓慢呼吸、雪花飘落 ──────────────────────────────────────────────────────────────── */ @keyframes frostGlow { 0%, 100% { box-shadow: 0 0 20px 2px rgba(180, 200, 220, 0.1), 0 0 40px 4px rgba(180, 200, 220, 0.05); } 50% { box-shadow: 0 0 30px 4px rgba(180, 200, 220, 0.2), 0 0 60px 8px rgba(180, 200, 220, 0.1); } } @keyframes snowFall { 0% { transform: translateY(-10%) translateX(0); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.6; } 100% { transform: translateY(110%) translateX(20px); opacity: 0; } } [data-season="winter"] .winter-frost { animation: frostGlow 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } [data-season="winter"] .card { border-color: rgba(180, 200, 220, 0.15); } [data-season="winter"] .card:hover { box-shadow: 0 4px 20px rgba(180, 200, 220, 0.12), 0 12px 40px rgba(180, 200, 220, 0.08); } /* 雪花飘落 */ [data-season="winter"] .snow-fall { position: relative; overflow: hidden; } [data-season="winter"] .snow-fall::before, [data-season="winter"] .snow-fall::after { content: '❄'; position: absolute; font-size: 12px; color: rgba(180, 200, 220, 0.6); opacity: 0; pointer-events: none; z-index: 1; animation: snowFall 10s linear infinite; } [data-season="winter"] .snow-fall::before { left: 20%; animation-delay: 0s; animation-duration: 10s; } [data-season="winter"] .snow-fall::after { left: 75%; font-size: 10px; animation-delay: 4s; animation-duration: 12s; } /* 冬日冷色调文字 */ [data-season="winter"] .welcome-greeting { color: #5a7a8a; } /* ──────────────────────────────────────────────────────────────── 6. 季节切换过渡动画当 data-season 属性变化时的平滑过渡 ──────────────────────────────────────────────────────────────── */ body, .card, .entry-item, .welcome-banner { transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* ──────────────────────────────────────────────────────────────── 7. 季节背景色调覆盖 ──────────────────────────────────────────────────────────────── */ [data-season="spring"] body::after, [data-season="autumn"] body::after, [data-season="winter"] body::after { background: radial-gradient( circle at 50% 0%, var(--season-bg-tint) 0%, transparent 70% ); } /* ──────────────────────────────────────────────────────────────── 8. 日期拨盘季节适配 ──────────────────────────────────────────────────────────────── */ [data-season="spring"] .date-dial-item.active { background: linear-gradient(135deg, #e8a0b0 0%, #f0c0d0 100%); } [data-season="summer"] .date-dial-item.active { background: linear-gradient(135deg, #f0c040 0%, #f8e080 100%); } [data-season="autumn"] .date-dial-item.active { background: linear-gradient(135deg, #c8915a 0%, #e0b080 100%); } [data-season="winter"] .date-dial-item.active { background: linear-gradient(135deg, #a0c0d0 0%, #c0e0f0 100%); } /* ──────────────────────────────────────────────────────────────── 9. 进度条颜色季节适配 ──────────────────────────────────────────────────────────────── */ [data-season="spring"] .progress-fill { background: linear-gradient(90deg, #4aab7d 0%, #e8a0b0 100%) !important; } [data-season="summer"] .progress-fill { background: linear-gradient(90deg, #4aab7d 0%, #f0c040 100%) !important; } [data-season="autumn"] .progress-fill { background: linear-gradient(90deg, #4aab7d 0%, #c8915a 100%) !important; } [data-season="winter"] .progress-fill { background: linear-gradient(90deg, #4aab7d 0%, #a0c0d0 100%) !important; }