css波浪动画效果怎么写_通过背景位置和关键帧循环-css教程-PHP中文网

css波浪动画效果怎么写_通过背景位置和关键帧循环

P粉602998670

发布： 2025-12-18 13:00:14

原创

980人浏览过

CSS波浪动画核心是background-image配合background-position位移与@keyframes循环：1.纯CSS可用线性+径向渐变拼出单层波形；2.推荐SVG路径实现精准波形；3.位移量须等于波长以保证无缝；4.多层叠加可增强层次感。

css波浪动画效果怎么写_通过背景位置和关键帧循环

用 CSS 实现波浪动画，核心是利用 background-image（通常是 SVG 或渐变绘制的波形）配合 background-position 的水平或垂直位移，再通过 @keyframes 控制循环移动，形成流动感。关键在于波形路径要闭合、位移方向与波形周期匹配，否则会出现跳变或断裂。

1. 用线性渐变 + 径向渐变拼出单层波形

不依赖外部图片，纯 CSS 绘制简单正弦波轮廓：

用多个 radial-gradient 模拟波峰波谷，叠加在 linear-gradient 背景上
确保波形宽度（如 200px）和背景尺寸一致，方便后续平铺或位移
示例片段：背景设为 background: linear-gradient(#4facfe 50%, #00f2fe 50%);，再叠一层径向渐变模拟波顶

2. 使用 SVG 波形作为 background-image（推荐）

更精准可控，适合复杂波浪（如双层、起伏幅度大）：

写一个 inline SVG，<path d="M0,50 Q50,20 100,50 T200,50"></path> 描出平滑波形路径
转义后作为 url("data:image/svg+xml,...") 放入 background-image
设置 background-size: 200px 100px;（波长×高度），background-repeat: repeat-x;

3. 用 @keyframes 控制 background-position 循环移动

让波“动起来”的核心步骤：

百度文心百中

百度大模型语义搜索体验中心

263

查看详情

立即学习“前端免费学习笔记（深入）”；

动画只需改变 background-position-x（或 background-position 两个值）
位移量必须等于波形宽度（如 200px），才能无缝衔接；例如：0% { background-position: 0 0; } 100% { background-position: -200px 0; }
加上 animation: wave 3s ease-in-out infinite;，时间越长越舒缓，ease-in-out 让起伏更自然

4. 叠加多层波实现深度感（可选进阶）

真实波浪常有前后两层，速度/幅度不同：

用 background 简写叠加两层 SVG 或渐变波形，如：background: url(...), url(...);
分别设置不同 background-size 和 background-position 动画，第二层动画时长略长（如 4s）、位移略慢（如 -180px）
上层波用浅色+快速，下层用深色+缓慢，视觉上更有层次和流动节奏

不复杂但容易忽略细节：波形宽度必须和 background-position 位移量严格一致，否则循环会卡顿；SVG 中路径需闭合或左右延展足够，避免边缘露白。

以上就是css波浪动画效果怎么写_通过背景位置和关键帧循环的详细内容，更多请关注php中文网其它相关文章！