/* ═══════════════════════════════════════════════ 振华文脉 · 动态点睛组件 v1.0 wenmai-spark.css —— 为三个主体站注入"小而精"的动态活力： ① 顶部呼吸光条 ② 角落背景光晕 ③ 区块入场动画 ④ 卡片hover微光 ⑤ 标题极慢流光 用法：三个站 引入本 CSS + wenmai-spark.js， 并通过 指定主题色。 ═══════════════════════════════════════════════ */ /* 主题色变量（默认金=指印咖啡，经方用 jade，钦天监用 violet） */ html[data-spark="gold"] { --spark-1: #e8b96a; --spark-2: #c8924a; } html[data-spark="jade"] { --spark-1: #4fb389; --spark-2: #2e8a63; } html[data-spark="violet"] { --spark-1: #8b7bff; --spark-2: #5f4ad8; } :root { --spark-1: #e8b96a; --spark-2: #c8924a; --spark-glow: rgba(232,185,106,0.45); } /* ── ① 顶部呼吸光条（2px，随主题色缓慢流动）── */ .spark-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 4px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--spark-1) 30%, var(--spark-1) 50%, var(--spark-glow) 80%, transparent 100%); background-size: 220% 100%; opacity: .75; animation: sparkTopFlow 7s linear infinite; } @keyframes sparkTopFlow { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } /* ── ② 角落背景光晕（极淡呼吸，不抢内容）── */ .spark-orb { position: fixed; border-radius: 50%; z-index: 9990; pointer-events: none; filter: blur(55px); background: var(--spark-glow); opacity: 0; transition: opacity 2s ease; } .spark-orb.on { opacity: 1; } .spark-orb-a { width: 320px; height: 320px; top: -120px; right: -80px; animation: sparkBreathe 14s ease-in-out infinite alternate; } .spark-orb-b { width: 260px; height: 260px; bottom: -100px; left: -60px; animation: sparkBreathe 18s -7s ease-in-out infinite alternate; } @keyframes sparkBreathe { from { transform: translate(0,0) scale(1); } to { transform: translate(-24px,18px) scale(1.14); } } /* ── ③ 区块入场动画（进入视口淡入上浮）── */ .spark-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .spark-reveal.in { opacity: 1; transform: translateY(0); } /* ── ④ 卡片 hover 微光（边框+阴影轻亮起）── */ .spark-card { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .5s ease; } .spark-card:hover { transform: translateY(-4px); box-shadow: 0 14px 44px -14px var(--spark-glow), 0 0 0 1px color-mix(in srgb, var(--spark-1) 30%, transparent) inset; border-color: color-mix(in srgb, var(--spark-1) 40%, transparent) !important; } /* ── ⑤ 标题极慢流光（大标题文字渐变流动，30s循环）── */ .spark-title { background: linear-gradient(110deg, currentColor 0%, currentColor 42%, var(--spark-1) 50%, currentColor 58%, currentColor 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sparkTitleFlow 30s linear infinite; } @keyframes sparkTitleFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── 弱动效降级 ── */ @media (prefers-reduced-motion: reduce) { .spark-topbar, .spark-orb, .spark-title { animation: none !important; } .spark-reveal { opacity: 1; transform: none; transition: none; } }