最直接且灵活的css波浪形背景实现方法是结合clip-path与css动画，1. 可通过clip-path定义polygon形状并动画其y轴坐标实现“呼吸式”波浪；2. 更推荐使用超宽元素配合transform: translatex实现“流动式”波浪，利用硬件加速提升性能，该方案无需图片或svg，保持轻量且动态效果出色，适合现代网页设计需求。
CSS要做出波浪形背景，最直接且灵活的办法就是结合
clip-path
属性来定义形状，再辅以CSS动画技巧，让波浪动起来。这套组合拳能让你在不依赖图片或SVG的情况下，实现非常动态和现代的视觉效果。
解决方案
要实现波浪形背景，核心思路是利用
clip-path
裁剪出一个波浪形状的区域，然后通过CSS动画让这个形状或者承载它的元素动起来，模拟波浪的起伏或流动。
基础结构： 通常我们会有一个容器元素，并在其内部放置一个用于承载波浪背景的子元素，或者直接利用伪元素（
::before
或
::after
）。伪元素的好处是不会增加额外的DOM节点，保持HTML结构干净。
<div class="wave-container"> <div class="wave-background"></div> </div>
或者使用伪元素：
立即学习“前端免费学习笔记（深入）”；
<div class="wave-container"> <!-- 内容 --> </div>
CSS实现：
这里我们主要介绍两种常见的波浪动画实现方式：
1. “呼吸式”波浪动画（通过改变
clip-path
的Y轴坐标）
这种方式让波浪在原地上下起伏，像呼吸一样。它需要你在
@keyframes
中定义
clip-path
的多个状态，确保每个状态的
polygon()
点数一致。
.wave-container { width: 100%; height: 200px; /* 根据需要调整高度 */ position: relative; overflow: hidden; /* 确保波浪不会溢出容器 */ background-color: #f0f8ff; /* 容器背景 */ } .wave-background { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; /* 波浪的高度 */ background-color: #6495ed; /* 波浪的颜色 */ /* 定义波浪形状 - 初始状态 */ clip-path: polygon( 0% 100%, 0% 70%, 10% 80%, 20% 60%, 30% 75%, 40% 65%, 50% 85%, 60% 70%, 70% 80%, 80% 60%, 90% 75%, 100% 65%, 100% 100% ); /* 应用动画 */ animation: breatheWave 4s ease-in-out infinite alternate; } @keyframes breatheWave { 0% { /* 初始状态，与上面 clip-path 定义一致 */ clip-path: polygon( 0% 100%, 0% 70%, 10% 80%, 20% 60%, 30% 75%, 40% 65%, 50% 85%, 60% 70%, 70% 80%, 80% 60%, 90% 75%, 100% 65%, 100% 100% ); } 50% { /* 中间状态，波浪峰谷反转或高度变化 */ clip-path: polygon( 0% 100%, 0% 60%, /* 稍微降低 */ 10% 70%, /* 稍微降低 */ 20% 80%, /* 稍微升高 */ 30% 65%, 40% 75%, 50% 65%, 60% 80%, 70% 70%, 80% 85%, 90% 65%, 100% 75%, 100% 100% ); } 100% { /* 结束状态，回到初始或另一个状态 */ clip-path: polygon( 0% 100%, 0% 70%, 10% 80%, 20% 60%, 30% 75%, 40% 65%, 50% 85%, 60% 70%, 70% 80%, 80% 60%, 90% 75%, 100% 65%, 100% 100% ); } }
2. “流动式”波浪动画（通过
transform: translateX
移动一个超宽的波浪元素）
这种方式更常见，也更容易实现连续的流动感。我们创建一个宽度远超容器的波浪元素，然后通过平移它来模拟波浪的横向移动。
.wave-container { width: 100%; height: 200px; position: relative; overflow: hidden; background-color: #f0f8ff; } .wave-background { position: absolute; bottom: 0; left: 0; width: 200%; /* 关键：宽度是容器的两倍或更多 */ height: 100px; background-color: #6495ed; /* 定义波浪形状 - 确保波浪覆盖整个超宽区域 */ /* 这里的点需要更多，以覆盖 200% 的宽度，并形成一个完整的波浪周期 */ clip-path: polygon( 0% 100%, 0% 80%, 5% 70%, 10% 85%, 15% 75%, 20% 90%, 25% 80%, 30% 95%, 35% 85%, 40% 100%, /* 第一个完整波浪周期结束 */ 40% 100%, /* 从这里开始重复波浪形状，以确保无缝衔接 */ 45% 80%, 50% 70%, 55% 85%, 60% 75%, 65% 90%, 70% 80%, 75% 95%, 80% 85%, 85% 100%, 100% 100%, /* 确保底部闭合 */ 100% 100% ); /* 应用动画 */ animation: moveWave 8s linear infinite; } @keyframes moveWave { 0% { transform: translateX(0); } 100% { /* 移动一个波浪周期的距离，这里是自身宽度的一半 */ transform: translateX(-50%); } } /* 提示：上述 clip-path 的点位需要根据你想要实现的波浪形状仔细调整。 你可以使用在线 clip-path 生成器来辅助创建。 对于更复杂的波浪，可能需要多层波浪元素，或者使用 SVG path。 */
为什么选择clip-path而非其他方法？
说实话，制作波浪背景的方法有很多，比如用SVG、背景图片、甚至纯CSS渐变。但
clip-path
在很多场景下，确实是个非常值得考虑的选项，它有自己独特的优势和一些挑战。
首先，
clip-path
是纯CSS的解决方案。这意味着你不需要额外的图片资源，减少了HTTP请求，对于页面加载速度是有益的。而且，它直接在CSS中定义形状，可以很方便地和CSS动画结合，实现各种动态效果，不像背景图片那样是静态的。相比于SVG，
clip-path
直接作用于HTML元素，上手门槛相对低一些，特别是使用
polygon()
时，你只需要定义一系列点。对于一些相对规则或可以由多边形近似的波浪，
clip-path
的性能表现通常很不错，因为它能很好地利用GPU加速。
当然，它也有局限性。如果你需要非常复杂、精细、或者像手绘一样的曲线波浪，那么SVG的
<path>
元素可能会提供更好的控制力和表现力，因为它支持贝塞尔曲线。
clip-path
的
path()
函数虽然也能用SVG路径，但手动编写起来就相当繁琐了，通常需要借助工具。而用
polygon()
来模拟曲线，点越多曲线越平滑，但点太多又可能影响性能。纯CSS渐变也能做出一些类似波浪的效果，但通常是重复的锯齿状或简单的曲线，缺乏
clip-path
在形状上的自由度。
所以，我的看法是，当你需要一个动态、轻量、且形状自由度较高的波浪背景时，
clip-path
是一个非常棒的工具。它让你在纯CSS的范畴内，能玩出不少花样。
制作复杂波浪形状的技巧与挑战
制作复杂的波浪形状，尤其是要兼顾美观和动画流畅性，确实有些门道。
最直接的技巧是利用在线
clip-path
生成器。这类工具通常提供一个可视化界面，你可以拖动点来创建形状，然后它会实时生成CSS代码。这比你手动去计算每个点的百分比坐标要省心太多了。对于
polygon()
来说，多增加一些点，可以更细致地勾勒出波浪的起伏，让它看起来更圆润，而不是像锯齿。
当
polygon()
不足以满足你的曲线需求时，
clip-path
的
path()
函数就登场了。它允许你使用SVG的路径语法（比如
M
代表移动到，
L
代表直线连接，
C
代表三次贝塞尔曲线等）来定义形状。用
path()
可以创建非常平滑、复杂的曲线，这是
polygon()
难以企及的。然而，这里的挑战也显而易见：手写SVG路径语法是个技术活，需要对路径命令有深入理解。通常，我们会先在矢量图形软件（如Adobe Illustrator、Sketch、Figma）中绘制出想要的波浪形状，然后导出为SVG，再从中提取
<path>
标签里的
d
属性值，粘贴到
clip-path: path('...')
中。
动画复杂波浪形状时，挑战会更大。如果你直接动画
clip-path
的
polygon()
点，你需要确保动画的起始和结束状态拥有相同数量的点，并且点的顺序也要对应，否则浏览器无法正确插值，动画就会失效或出现奇怪的跳变。对于
path()
的动画，也就是所谓的”SVG morphing”，CSS原生支持有限，通常需要借助JavaScript库（如GSAP的MorphSVGPlugin）来实现平滑的路径形变动画。
因此，我的建议是，对于大多数常见的背景波浪效果，从简单的
polygon()
开始尝试，并结合
transform: translateX
的移动动画。如果需要更复杂的形态，可以考虑叠加多个波浪层（例如，两个不同颜色、不同速度、略微偏移的波浪），或者在设计初期就考虑是否需要引入SVG来获得极致的控制力。
动画性能与优化考量
波浪背景动画虽然好看，但如果处理不当，可能会成为页面的性能瓶颈，尤其是在移动设备上。所以，在实现时，性能优化是必须考虑的。
首先，一个好消息是，
clip-path
和
transform
（例如
translateX
、
translateY
）这些CSS属性，通常能够利用GPU进行硬件加速。这意味着它们在动画时，渲染效率会比较高，对CPU的压力相对较小。所以，当我们选择用
transform
来移动一个超宽的波浪元素时，通常能获得不错的流畅度。
然而，如果你选择直接动画
clip-path
的
polygon()
点，就需要注意了。如果波浪形状的点数非常多，或者动画的帧率很高，浏览器在每一帧都需要重新计算和绘制这个复杂的裁剪区域，这可能会带来性能开销，导致动画卡顿。在这种情况下，你可以尝试减少
polygon()
的点数，或者考虑是否可以通过其他方式（比如多个简单波浪层的叠加）来实现类似的效果。
另一个值得关注的点是
animation-timing-function
。使用
linear
或
ease-in-out
这样的缓动函数，通常能让动画看起来更自然、更平滑。避免使用过于复杂的自定义贝塞尔曲线，除非你明确知道它不会导致性能问题。
对于更复杂的波浪效果，比如多层波浪、不同速度、不同透明度，你可以将它们分别作为独立的元素进行动画。这样，浏览器可以更好地进行渲染优化，并且你也能更灵活地控制每一层波浪的视觉效果。
最后，一个实用的优化技巧是，在开发过程中使用浏览器的开发者工具（例如Chrome的Performance面板）进行性能分析。它能告诉你哪些CSS属性的动画导致了重绘或布局回流，帮助你找出潜在的性能瓶颈。有时候，一个看起来很酷的动画，在实际设备上可能并不流畅，这时候就需要权衡美观和性能了。我的经验是，一个微妙且流畅的动画，远比一个复杂但卡顿的动画更能提升用户体验。
评论（已关闭）
评论已关闭