/* ============================================================ 🐟 鱼鱼Blog · 动画特效层 animate.css ------------------------------------------------------------ 设计原则： 1. 性能优先 —— 全部使用 transform / opacity（GPU 合成层）， 不触发重排(Reflow)与重绘(Paint)，移动端流畅。 2. 渐进增强 —— 所有入场动画初始态仅在 html.js-anim 下生效， JS 未加载/失败时页面内容完全正常（优雅降级）。 3. 无障碍 —— prefers-reduced-motion: reduce 时禁用全部动画。 4. 风格克制 —— 时长 0.45s~0.7s，缓动统一 ease-out，不干扰阅读。 5. 作用域隔离 —— 所有规则带 [data-anim] / .wb- 前缀，不碰主题样式。 ============================================================ */ /* ---------- 0. 基础变量（时长 / 缓动 / 位移） ---------- */ :root { --wb-dur: 0.6s; /* 入场动画时长 */ --wb-dur-fast: 0.25s; /* 悬停微交互时长 */ --wb-ease: cubic-bezier(.22, .61, .36, 1); /* 标准 ease-out */ --wb-offset: 26px; /* 入场上移距离 */ --wb-shadow: 0 8px 24px rgba(31, 45, 61, .12); /* 悬停阴影 */ } /* ---------- 1. 平滑滚动（全局，兼容旧浏览器回退） ---------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---------- 2. 入场动画（仅在 JS 启用后生效） ---------- */ /* JS 会给 添加 .js-anim，并给目标元素设置 data-anim 属性 */ /* 2.1 默认隐藏态 —— 只对标记了 data-anim 的元素生效 */ html.js-anim [data-anim] { opacity: 0; transform: translateY(var(--wb-offset)); transition: opacity var(--wb-dur) var(--wb-ease), transform var(--wb-dur) var(--wb-ease); will-change: opacity, transform; /* 提示浏览器提前建合成层 */ } /* 2.2 淡入类型（无位移，用于 banner/hero 等） */ html.js-anim [data-anim="fade"] { transform: none; } /* 2.3 进入视口后 —— 元素完全显现 */ html.js-anim [data-anim].wb-in { opacity: 1; transform: none; } /* 2.4 交错延迟 —— JS 按元素索引写入 --wb-delay，错峰入场 */ html.js-anim [data-anim][style*="--wb-delay"] { transition-delay: var(--wb-delay, 0s); } /* ---------- 3. 悬停微交互（纯 CSS，不依赖 JS） ---------- */ /* 3.1 文章卡片 / 内容块：微上浮 + 柔和阴影 */ .wb-hover { transition: transform var(--wb-dur-fast) var(--wb-ease), box-shadow var(--wb-dur-fast) var(--wb-ease); will-change: transform; } .wb-hover:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow); } .wb-hover:active { transform: translateY(-1px) scale(.99); } /* 3.2 导航链接：接度微变 + 轻微下划线 */ .header-menu a { transition: opacity var(--wb-dur-fast) ease, transform var(--wb-dur-fast) ease; } .header-menu a:hover { opacity: .75; transform: translateY(1px); } /* 3.3 通用链接（页脚/正文）：颜色过渡柔和化（不覆盖主题色，只加过渡） */ a { transition: opacity var(--wb-dur-fast) ease; } a:hover { opacity: .85; } /* 3.4 按钮（写文章/登录等） */ .header-menu a[href*="admin"], .header-menu a[href*="login"] { display: inline-block; transition: transform var(--wb-dur-fast) ease, box-shadow var(--wb-dur-fast) ease; } .header-menu a[href*="admin"]:hover, .header-menu a[href*="login"]:hover { transform: translateY(-2px); } /* ---------- 4. banner 滚动渐隐（配合 JS 写入 --wb-scroll 进度） ---------- */ html.js-anim .banner { transition: opacity .15s linear, transform .15s linear; opacity: calc(1 - var(--wb-scroll, 0) * 1.6); /* 滚动时渐隐 */ transform: translateY(calc(var(--wb-scroll, 0) * -24px)); /* 轻微上移视差 */ will-change: opacity, transform; } /* ---------- 5. 图片加载柔和过渡 ---------- */ /* JS 给页面图片加 wb-img 类：加载完成后加 wb-img-loaded 淡入 */ .wb-img { opacity: 0; transition: opacity .5s ease; background: rgba(0,0,0,.04); /* 加载中浅灰底，防白屏闪烁 */ } .wb-img.wb-img-loaded { opacity: 1; } /* ---------- 6. 无障碍：用户偏好减少动效时，全部禁用 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto !important; } html.js-anim [data-anim], html.js-anim .banner, .wb-img { opacity: 1 !important; transform: none !important; transition: none !important; } .wb-hover:hover { transform: none !important; box-shadow: none !important; } } /* ---------- 7. 移动端微调：位移距离减小，更自然 ---------- */ @media (max-width: 768px) { :root { --wb-offset: 16px; } } /* ============================================================ 特效层 v2（点击粒子 / 拖尾光点 / 阅读进度 / 弹性入场） ============================================================ */ /* ---------- 8. 全屏特效 Canvas（点击粒子 + 拖尾光点） ---------- */ /* 固定全屏、不拦截鼠标事件；z-index 高于内容但低于弹窗 */ .wb-fx-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* 关实：不挡任何交互 */ z-index: 9999; } /* ---------- 9. 顶部阅读进度条 ---------- */ .wb-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #2e86c1, #7c3aed, #ff6b6b); transform: scaleX(0); transform-origin: 0 50%; transition: transform .12ss linear; /* 跟手但不抖动 */ will-change: transform; z-index: 10000; border-radius: 0 3px 3px 0; } /* ---------- 10. 入场弹性点亚特（overshoot 回弹〉 ----------* / /* 元素进入视口时：上移进入 → 絕微冲过头 → 回落到原位，有"撞慥"h */ @keyframes wb-pop-in { 0% { opacity: 0; transform: translateY(calc(var(--wb-offset, 26px) * 1)); } 55% { opacity: 1; transform: translateY(calc(var(--wb-offset, 26px) * -0.3)); } 75% { opacity: 1; transform: translateY(calc(var(--wb-offset, 26px) * 0.12)); } 100% { opacity: 1; transform: none; } } /* 与入场动画加加：覅盖原的点种过渡，用弹性刨画 */ html.js-anim [data-anim].wb-in { animation: wb-pop-in .7s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--wb-delay, 0s); } /* ---------- 11. 特效降线：reduced-motion 时全部尺重） ----------*/ @media (prefers-reduced-motion: reduce) { .wb-progress { display: none; } /* 进度条不是装饰，但为一致性也关闭 */ html.js-anim [data-anim].wb-in { animation: none; opacity: 1; transform: none; } }