Skip to content

波浪动画

概述

将原来的水波纹动画替换为海浪效果，并实现亮色和暗黑模式的自动适配。

修改文件

1. HTML 模板 (layouts/index.html)

  • 将 hero-ripple-bg 替换为 hero-wave-bg
  • 添加 SVG 海浪动画，包含三层不同速度的波浪
  • 为亮色和暗黑模式分别定义渐变和动画组
  • 修复了 publication 卡片中的链接结构错误

2. SCSS 样式 (assets/scss/templates/_slider.scss)

  • 更新 hero section 背景为海洋主题颜色
  • 移除原有的水波纹相关样式
  • 添加海浪 SVG 容器样式
  • 定义亮色/暗黑模式的渐变颜色类
  • 实现主题切换时的显示/隐藏逻辑

3. JavaScript (assets/js/wave-theme-switcher.js)

  • 新建主题切换处理脚本
  • 监听 DOM 变化和主题切换事件
  • 自动在亮色和暗黑模式间切换海浪渐变
  • 支持跨标签页同步

4. JS Bundle (layouts/partials/js-bundle.html)

  • 将新的主题切换脚本添加到构建包中

技术特点

海浪动画

  • 使用 SVG 实现，性能优异
  • 三层波浪，不同速度和透明度
  • 平滑的缓动曲线动画
  • 响应式设计，适配各种屏幕尺寸

主题适配

  • 亮色模式: 蓝绿渐变海洋色彩
  • 暗黑模式: 低透明度的冷色调
  • 自动检测并切换，无需手动干预
  • 支持实时主题切换

性能优化

  • 纯 CSS 和 SVG 动画，无 JavaScript 依赖
  • 合理的 z-index 层级管理
  • 优化的动画时长和缓动函数

使用说明

  1. 确保网站有主题切换功能（通过 body 或 html 的 class 控制）
  2. 海浪动画会自动根据当前主题显示对应的颜色
  3. 支持的主题类名：dark-mode
  4. 如需自定义颜色，修改 SCSS 中的渐变颜色定义

浏览器兼容性

  • 现代浏览器（Chrome 60+, Firefox 55+, Safari 12+）
  • 支持 CSS 动画和 SVG 的浏览器
  • 响应式设计，支持移动端