# 网页波浪设计器擅长使用 SVG 滤镜、CSS 动画和分层技术为 Web 应用程序创建逼真、高性能的海洋和水波效果。专注于水生视觉效果，从温和的涟漪到戏剧性的海浪，在光通过水的折射物理学方面拥有特殊的专业知识。 ## 何时使用此技能 **用于：** * 海浪背景和海景 * 水下扭曲/折射效果 * 海滩上有泡沫的海岸波浪 *池塘/水池波纹动画 * 液体玻璃UI效果 * 以水为主题的加载状态 * 具有深度的视差海洋层 * 游戏用的风格化/卡通水 * 水面的反射效果 **请勿用于：** * 3D 体积海洋渲染 -> 使用 **WebGL/Three.js/Ocean.js** * 实时流体模拟 -> 使用**画布物理引擎** * 视频效果->使用视频编辑软件 * 简单的蓝色渐变，没有运动 *水滴物理->使用粒子系统 ## 核心区别：湍流与分形噪声 **关键**：对于水效果，请使用 `type="turbulence"` （而不是像云那样的 fractalNoise）：类型 |视觉 |最适合 ---|---|--- `湍流` |连续流纹，从透明黑色开始| **水、波浪、液体** `分形噪声` |随机云状斑块，不透明|云、烟、地形 ## SVG 水过滤管道基本的水效过滤链：源 -> feTurbulence -> feDisplacementMap -> feComponentTransfer -> feComposite （波浪）（扭曲）（颜色/不透明度）（混合） ### 1\. feTurbulence - 波形生成 baseFrequency="0.01 0.1" numOctaves="3" seed="42" 结果=“波浪” /> **基本频率解释（两个值）：** X 频率 | Y 频率 |结果 ---|---|--- 0.01 | 0.01 0.1 | 0.1具有垂直振荡的长水平波 0.005 | 0.005 0.05 | 0.05深海汹涌澎湃 0.02 | 0.02 0.15 | 0.15波涛汹涌的表面波 0.03 | 0.03 0.03 | 0.03方形波纹（池塘）比例很重要： * **X 远小于 Y** ：拉伸的水平波浪（海洋） * **X == Y** ：圆形波纹（池塘、水池） * **X 远大于 Y** ：垂直条纹（瀑布） ### 2\. feDisplacementMap - 折射效果创建弯曲/扭曲，使水后面的内容看起来呈波纹状。 in2="waves" scale="20" xChannelSelector="R" yChannelSelector="G" 结果=“折射” /> 规模值|效果 ---|--- 10-15 | 10-15温柔的池水涟漪 15-25 | 15-25标准水折射 25-40 | 25-40波形畸变强 40+ |迷幻（不切实际） ### 3\. feComponentTransfer - 水彩通过操纵通道将噪音转化为水般的颜色。 <！-- 减少红色--> <！-- 增强绿色--> <！-- 强蓝色--> ### 4\. feGaussianBlur - 焦散（水下光）结果=“焦散” /> ### 5\.合成 - 层组装 ## 波浪型食谱 ### 海洋表面波浪 <定义> <过滤器id =“oceanWaves”x =“0”y =“0”宽度=“100％”高度=“100％”> <动画属性名称=“基本频率” 持续时间=“60秒” 值=“0.005 0.05;0.007 0.06;0.005 0.05” 重复计数=“不定”/> <矩形宽度=“100％”高度=“100％”填充=“url（#oceanGradient）”filter=“url（#oceanWaves）”/> ### 池塘涟漪（圆形） <过滤器id =“pondRipples”> 数字八度=“2” 种子=“10” 结果=“涟漪”/> ### 海滩海岸波浪（破碎） <过滤器id =“shoreWaves”> 数字八度=“3” 种子=“5” 结果=“波浪”/> ### 水下变形（透过水看） <动画属性名称=“基本频率” 杜尔=“8秒” 值=“0.015 0.08;0.018 0.09;0.015 0.08” 重复计数=“不定”/> ### 液体玻璃效果（现代 UI） <过滤器id =“liquidGlass”x =“-5％”y =“-5％”宽度=“110％”高度=“110％”> <动画属性名称=“种子” 杜尔=“4秒” 值=“99;100;101;100;99” 重复计数=“不定”/> ### 风格化/卡通波浪 <过滤器id =“卡通水”> 结果=“波浪”/> ## 动画技术 ### JavaScript requestAnimationFrame（最平滑） const turbulence = document.querySelector('#seaFilter feTurbulence'); 让帧= 0；函数 animateWaves() { 帧+= 0.003； // 轻柔的呼吸动作 const xFreq = 0.006 + Math.sin(frame) * 0.002; 常量 yFreq = 0.05 + Math.sin(帧 * 0.7) * 0.01; turbulence.setAttribute('baseFrequency', `${xFreq} ${yFreq}`); requestAnimationFrame(animateWaves); } 动画波（）； ### SVG animate（声明式，CPU 密集型） <动画属性名称=“基本频率” 持续时间=“60秒” 键时间=“0;0.5;1” 值=“0.008 0.08;0.012 0.12;0.008 0.08” 重复计数=“无限” /> **警告**：过滤器属性上的 SVG 动画会强制每帧重新计算完整的过滤器。谨慎使用。 ### CSS 变换动画（最佳性能）移动水元件，而不是过滤器： .wave-layer { 动画：波浪漂移20秒线性无限； } @keyframes 波漂移 { 从 { 变换：translateX(0) translateY(0); } 到 { 变换：translateX（-50%）translateY（5px）； } } ### 种子动画（变形波）为形状变化设置动画种子，无需基频成本： <动画属性名称=“种子” 持续时间=“20秒” 值=“1;50;100;50;1” 重复计数=“无限” /> ## 分层策略 ### 多层海洋

.海洋{ 位置：相对；高度：100vh；背景：线性渐变（180deg， #0c4a6e 0%, #0369a1 40%, #0ea5e9 100% ）；溢出：隐藏； } .波{ 位置：绝对；宽度：200%；高度：100%；背景：rgba(255,255,255,0.1); } .wave-back { 过滤器： url(#waveBack); 不透明度：0.3；动画：漂移90年代线性无限；底部：0； } .wave-mid { 过滤器： url(#waveMid); 不透明度：0.5；动画：漂移60年代线性无限；底部：-5%； } .波前{ 过滤器： url(#waveFront); 不透明度：0.7；动画：漂移35s线性无限；底部：-10%； } .泡沫层{ 位置：绝对；底部：0；宽度：100%；高度：20%；背景：线性渐变（到顶部， rgba(255,255,255,0.8) 0%, 透明100% ）；过滤器： url(#foamFilter); } @关键帧漂移{ 来自 { 变换：translateX(0); } 到 { 变换：translateX(-50%); } } ### 图层参数指南层 |不透明度|速度|过滤刻度|基频 ---|---|---|---|--- 背部（深）| 0.2-0.4 | 80-100 秒 | 15 | 15 0.004 0.04 中| 0.4-0.6 | 50-70 年代 | 20 | 0.006 0.06 正面（表面）| 0.6-0.8 | 30-45 秒 | 25 | 25 0.01 0.1 泡沫| 0.7-0.9 | 25-35 秒 | 10 | 10 0.02 0.02 ## 调色板 ### 深海 .深海{ 背景：线性渐变（180deg， #0c4a6e 0%, /* 深蓝色 */ #075985 30%, #0369a1 60%, #0284c7 100% /* 表面微光 */ ）； } * 主要：`#0369a1` * 深：`#0c4a6e` * 突出显示：`#38bdf8` ### 热带/加勒比海 .热带{ 背景：线性渐变（180deg， #06b6d4 0%, /* 青色表面 */ #22d3ee 40%, #67e8f9 70%, #a5f3fc 100% /* 浅沙反射 */ ）； } * 主要：`#06b6d4` * 浅：`#67e8f9` * 泡沫：`#ecfeff` ### 惊涛骇浪 .暴风雨{ 背景：线性渐变（180deg， #1e293b 0%, /* 乌云 */ #334155 30%, #475569 60%, #64748b 100% /* 白浪 */ ）； } * 主要：`#475569` * 深度：`#1e293b` * 白帽：`#cbd5e1` ### 日落倒影 .日落水{ 背景：线性渐变（180deg， #831843 0%, /* 粉红色的天空 */ #9d174d 20%, #be185d 40%, #0369a1 60%, /* 水开始 */ #0c4a6e 100% ）； } ## 完整的实施模板 ### 模板 1：全海洋场景 <头> <风格> * { 边距：0；填充：0；框大小：边框框； } .海洋场景{ 位置：相对；宽度：100%；高度：100vh；背景：线性渐变（180deg， #87CEEB 0%, /* 天空 */ #87CEEB 40%， #0369a1 40%, /* 地平线 */ #0c4a6e 100% /* 深 */ ）；溢出：隐藏； } .地平线{ 位置：绝对；顶部：40%；左：0；右：0；高度：2px；背景：rgba(255,255,255,0.3); } .波{ 位置：绝对；宽度：200%；高度：60%；底部：0；背景：rgba(255,255,255,0.15); } .wave-1 { 过滤器： url(#wave1); 动画：漂移80年代线性无限；不透明度：0.4； } .wave-2 { 过滤器： url(#wave2); 动画：漂移55s线性无限；动画延迟：-20s；不透明度：0.6； } .wave-3 { 过滤器： url(#wave3); 动画：漂移35s线性无限；动画延迟：-10s；不透明度：0.8； } @关键帧漂移{ 来自 { 变换：translateX(0); } 到 { 变换：translateX(-50%); } } <正文>

### 模板 2：水下视图（水后面的内容） <风格> .水下容器{ 位置：相对；宽度：100%；溢出：隐藏； } .内容背后的水{ /* 你的实际内容 */ } .水覆盖{ 位置：绝对；插图：0；指针事件：无；过滤器： url(#underwaterDistort); } .焦散{ 位置：绝对；插图：0；背景： url('data:image/svg+xml,...') 重复；不透明度：0.3；混合混合模式：叠加；动画：焦散位移 10 秒线性无限； } @keyframes 焦散偏移 { 来自{背景位置：0 0; } 到 { 背景位置：100px 50px; } } <脚本> // 水下扭曲动画 const turb = document.getElementById('underwaterTurb'); 让帧= 0；函数动画（）{ 帧+= 0.005；常量 xFreq = 0.015 + Math.sin(frame) * 0.003; 常量 yFreq = 0.08 + Math.sin(帧 * 0.7) * 0.01; turb.setAttribute('baseFrequency', `${xFreq} ${yFreq}`); 请求动画帧（动画）； } 动画（）； ### 模板 3：反应水成分从 'react' 导入 React, { useEffect, useRef, useMemo }; 接口 WaterEffectProps { 类型？： '海洋' | '泳池' | '流' | '玻璃'; 强度？：“微妙”| '中等' | '强的'; 动画？：布尔值；类名？：字符串；孩子？：React.ReactNode； } 常量 WATER_CONFIGS = { 海洋: { 基频: [0.008, 0.08], 八度: 4, 比例: 25 }, 池：{ 基频：[0.02，0.02]，八度：2，比例：12 }，流: { 基频: [0.01, 0.15], 八度: 3, 比例: 20 }, 玻璃: { baseFreq: [0.01, 0.05], 八度: 2, 音阶: 8 }, }; 常量 INTENSITY_MULTIPLIERS = { 微妙：0.5，中：1.0，强：1.5， }; 导出 const WaterEffect: React.FC = ({ 类型 = '海洋', 强度=“中”，动画=真，类名, 儿童 }) => { const turbRef = useRef(null); constframeRef = useRef(0); const config = WATER_CONFIGS[类型]; const mult = INTENSITY_MULTIPLIERS[强度]; const filterId = useMemo(() => `水-${type}-${Date.now()}`, [类型] ）；使用效果（（）=> { if (!animate || !turbRef.current) 返回；让动画ID：数字； const animateWater = () => { frameRef.current += 0.004； const 框架=frameRef.current； const xFreq = config.baseFreq[0] + Math.sin(frame) * 0.002; const yFreq = config.baseFreq[1] + Math.sin(frame * 0.7) * 0.01; turbRef.current?.setAttribute('baseFrequency', `${xFreq} ${yFreq}`); 动画ID = requestAnimationFrame(animateWater); }; 动画水（）； return () => cancelAnimationFrame(animationId); }, [动画, 配置]); 返回（ <>

{孩子}

）； }; // 用法： // //

// 水效果 ### 模板 4：纯 CSS Waves（无 SVG）对于没有 SVG 滤波器的简单、高性能波形： .css-waves { 位置：相对；高度：300px；背景：线性渐变（180deg，#0369a1 0%，#0c4a6e 100%）；溢出：隐藏； } .css-wave { 位置：绝对；宽度：200%；高度：100%；底部：0；左：-50%；背景：径向渐变（椭圆 100% 50% at 50% 100%， rgba(255,255,255,0.3) 0%, 透明60% ）；动画：css-wave-move 8s 缓入无限；变换原点：中心底部； } .css-wave:nth-child(1) { 动画持续时间：7s；不透明度：0.5； } .css-wave:nth-child(2) { 动画持续时间：10s；动画延迟：-3s；不透明度：0.3； } .css-wave:nth-child(3) { 动画持续时间：13s；动画延迟：-5s；不透明度：0.2； } @keyframes css-wave-move { 0%, 100% { 变换：平移X(0) 缩放Y(1)； } 50% { 变换：翻译X（25％）缩放Y（1.1）； } } ## 性能优化 ### 关键规则 1. **使用`type="turbulence"`** \- 水的正确类型（不是 fractalNoise） 2. **numOctaves 4 或更少** \- 高于 4 最小视觉增益，指数 CPU 成本 3. **规模 10-30** \- 高于 40 变得不切实际且速度较慢 4. **避免动画基频** \- 使用 CSS 变换或种子动画代替 5. **GPU 提示** \- 在动画图层上添加 `will-change:transform` 6. **批量 SVG defs** \- 一个 `` 块，多个过滤器 ### 性能等级等级 |技术| FPS 目标 |使用案例 ---|---|---|--- 超|仅 CSS 径向渐变 | 60 帧/秒 |移动、低端高| SVG 滤镜、CSS 变换动画 | 60 帧/秒 |背景波中等| SVG 滤镜 + 种子动画 | 45-60 帧/秒 |互动水低| SVG 滤镜 + 基频动画 | 30-40 帧/秒 |仅英雄部分 ### 移动优化 @media（首选减少运动：减少）{ .波{ 动画：无！重要； } } @media（最大宽度：768px）{ /* 减少到2个波层 */ .wave-1 { 显示：无； } /* 使用更简单的过滤器 */ .wave { 过滤器：url(#waveSimple); } } ### 性能检测 const canHandleWaterEffects = () => { // 检查 GPU const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl'); if (!gl) 返回“超”； // 仅 CSS const debugInfo = gl.getExtension('WEBGL_debug_renderer_info'); 常量渲染器 = debugInfo ？ gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : ''; // 集成显卡 = 中层 if (renderer.includes('Intel') || renderer.includes('Mali')) { 返回“中”； } 返回“高”； }; // 应用适当的层 const tier = canHandleWaterEffects(); document.body.dataset.waterTier = 层； /* 基于层的样式 */ [data-water-tier="ultra"] .wave { 过滤器：无；背景：线性渐变(/*简单渐变*/); } [data-water-tier="medium"] .wave { 过滤器： url(#waveSimple); } [数据水层=“高”] .wave { 过滤器： url(#waveFull); } ## 框架集成 ### Next.js / React // 组件/OceanBackground.tsx '使用客户端'；从 'react' 导入 { useEffect, useState, useRef }; 从'./OceanBackground.module.css'导入样式；导出函数 OceanBackground({ 孩子 }: { 孩子: React.ReactNode }) { const [已安装，setMounted] = useState(false); const turbRef = useRef(null); 使用效果（（）=> { 设置安装（真）； // 挂载后动画让帧= 0；常量动画 = () => { 帧+= 0.003；如果 (turbRef.current) { const xFreq = 0.008 + Math.sin(frame) * 0.002; 常量 yFreq = 0.08 + Math.sin(帧 * 0.7) * 0.01; turbRef.current.setAttribute('baseFrequency', `${xFreq} ${yFreq}`); } 请求动画帧（动画）； }; const id = requestAnimationFrame(animate); return () => cancelAnimationFrame(id); }, []); if (!mounted) 返回 null；返回（

{children}

）； } ### 顺风 CSS // tailwind.config.js 模块. 导出 = { 主题：{ 扩展：{ 动画：{ 'wave-drift': 'wave-drift 60s 线性无限', 'wave-slow': 'wave-drift 90s 线性无限', 'wave-fast': 'wave-drift 35s 线性无限', }, 关键帧：{ '波浪漂移'：{ 来自: { 变换: 'translateX(0)' }, 至：{ 变换：'translateX(-50%)' }, }, }, 颜色：{ 海洋：{ 深：'#0c4a6e'，中：'#0369a1'，表面：'#0ea5e9'，泡沫：'#f0f9ff'， }, }, }, }, }; ### Vue 3 <模板>

<槽位/>

<脚本设置> 从'vue'导入{计算，onMounted，ref}；从 './WaveFilters.vue' 导入 WaveFilters； const waveLayers = 计算(() => [ { id: 1, 样式: { 过滤器: 'url(#wave1)', 动画持续时间: '80s', 不透明度: 0.4 }}, { id: 2, 样式: { 过滤器: 'url(#wave2)', 动画持续时间: '55s', 不透明度: 0.6 }}, { id: 3, 样式: { 过滤器: 'url(#wave3)', 动画持续时间: '35s', 不透明度: 0.8 }}, ]); ## 调试技巧 ### 可视化过滤器管道 <过滤器id =“调试水”> ### 常见问题问题 |原因 |解决方案 ---|---|--- 效果消失|过滤区域太小|添加`x =“-20％”y =“-20％”宽度=“140％”高度=“140％”` 方波/方波 |使用 fractalNoise |更改为`type =“turbulence”` 波浪太均匀|跨层相同的种子 |使用不同的“种子”值没有水平运动|相同的基频值 |使用 `baseFrequency="0.01 0.1"` （不同的 x/y）动画卡顿|动画过滤器属性 |使用 CSS 变换动画代替边缘伪影 |边界位移|通过 x/y/宽度/高度增加过滤区域 ### 浏览器开发工具 1. **元素面板** > 选择 SVG 过滤器 > 检查属性 2. **性能面板** > 记录 > 检查布局抖动 3. **图层面板** (Chrome) > 验证波浪层上的 GPU 加速 ## 与 web-cloud-designer 集成对于完整的大气场景，请结合水和云效果：

<风格> .场景{ 高度：100vh；显示：网格；网格模板行：60% 40%； } .天空{ 背景：线性渐变（180deg，#1e3c72 0%，#87CEEB 100%）； } .海洋{ 背景：线性渐变（180deg，#0369a1 0%，#0c4a6e 100%）； } .反射{ /* 镜像云在水面的运动 */ 位置：绝对；顶部：0；宽度：100%；高度：30%；背景：继承；变换：scaleY(-1)；不透明度：0.3；过滤器： url(#waterReflection) 模糊(2px); } ## 参考来源 * 红色订书机：“逼真的水效果 SVG 湍流” * Mitkov Systems：“液体玻璃水动画”（2025） * O'Reilly SVG 书籍：feTurbulence 章节 * MDN：SVG 过滤器基元文档 * CSS-Tricks：“水下模糊效果” * Codrops：“水扭曲效果” ** ** _水是一切自然的驱动力。_ \- 列奥纳多·达·芬奇

网页波浪设计师

包含技能