分享一个极具质感的网页底部动态波浪代码 (支持暗黑模式)

前言简介

默认的网站底部往往比较单调，今天给大家分享一个能让博客颜值瞬间提升的底部美化小技巧。这是一个基于纯 SVG 和 CSS 实现的“液态玻璃”动态波浪效果。没有使用任何笨重的 JavaScript，零性能损耗，丝滑流畅。

它的设计灵感来源于 macOS Tahoe 的通透质感，去除了繁杂的视觉干扰，专注于纯粹的光影与流体动态。

核心亮点

• 🌊 物理级流体力学：采用多层 SVG 叠加与错落的缓动曲线（Cubic-bezier），告别机械平移，模拟出真实的液态厚度与水波呼吸感。

• 🎨 高级液态渐变：内置深蓝-紫罗兰-青绿的高级色彩流转，视觉层次丰富而不杂乱。

• 🌗 完美双模式适配：深度兼容子比主题（Zibll）。在浅色模式下呈现通透的玻璃质感；切换到深色（夜间）模式后，自动触发滤色混合（Screen Blend Mode），化身为暗夜中微微发光的霓虹流体，拒绝死板。

食用方法

如果你使用的是子比主题，只需进入 子比主题设置 -> 自定义代码 -> 自定义底部 HTML 代码，将下方代码完整复制粘贴进去，保存刷新即可看到效果。其他 WordPress 主题或普通 HTML 网页也可以直接放在 <footer> 标签附近使用。

预览效果

可直接访问博客最下面页脚看效果

获取代码