在现代的前端开发中，动画效果几乎已经成为网站和应用程序的标配。而实现动态的波浪动效是一种非常流行且独特的设计。在本文中，我们将使用 CSS 和 SVG 来实现一个令人惊叹的动态波浪动效。
SVG 简介
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形。与传统的图片格式（如 JPEG、PNG）不同，SVG 是一种文本文件，因此可以使用文本编辑器进行编辑和修改。由于其矢量性质，SVG 可以根据不同的分辨率进行缩放，而不会失真。
使用 SVG 创建波浪形状
首先，我们将创建一个 SVG 文件以作为我们波浪动效的基础。以下是一个简单的 SVG 代码示例，用于创建一个波浪形状：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#ffffff" fill-opacity="1"
d="M0,96L80,85.3C160,75,320,53,480,53.3C640,53,800,75,960,101.3C1120,128,1280,160,1360,176L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
在上述代码中，我们使用 path 元素创建了一个形状，并使用 d 属性来定义波浪的路径。当填充颜色为白色时，该波浪形状将呈现出一个白色的波浪。
为了使波浪动起来，我们需要使用 CSS 动画。
CSS 动画实现波浪动效
要给我们的波浪动效添加动画效果，我们需要使用 CSS 的 @keyframes 规则和 animation 属性。以下是一个简单的示例：
@keyframes wave {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(0);
}
}
.path {
animation: wave 2s ease-in-out infinite;
}
在上述代码中，我们定义了一个名为 wave 的关键帧动画。其中，我们使用 transform 属性的 translateX() 方法来实现波浪形状的水平移动效果。通过在 .path 类选择器中应用动画属性，我们使波浪形状以 2 秒的持续时间、以 ease-in-out 缓动函数的形式进行无限循环。
结语
使用 CSS 和 SVG 实现动态的波浪动效不仅能为网站带来独特的视觉效果，还能提高用户体验。本文介绍了如何通过创建 SVG 波浪形状，并使用 CSS 动画来实现动态效果。你可以根据需求调整波浪的颜色、形状和动画效果，以创建各种各样的波浪动效。
希望本文对你有所帮助！如果你有任何问题或疑问，请随时留言。
参考链接：
本文来自极简博客，作者：绮丽花开，转载请注明原文链接：CSS SVG 实现动态的波浪动效
