css制作波浪
CSS制作波浪效果的方法
方法一：使用SVG和CSS
通过SVG创建波浪路径，结合CSS动画实现动态效果。
<div class="wave-container">
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0 C150,180 350,0 500,120 C650,240 850,120 1200,120 L1200,0 Z" class="wave"></path>
</svg>
</div>.wave-container {
width: 100%;
overflow: hidden;
}
.wave {
fill: #4a90e2;
animation: wave 3s ease-in-out infinite alternate;
}
@keyframes wave {
0% { transform: translateX(0) translateY(10px); }
100% { transform: translateX(-50px) translateY(-10px); }
}方法二：纯CSS伪元素
利用border-radius和伪元素创建波浪形状。
<div class="css-wave"></div>.css-wave {
position: relative;
height: 150px;
background: #4a90e2;
overflow: hidden;
}
.css-wave::before {
content: "";
position: absolute;
width: 200%;
height: 100%;
top: 0;
left: 0;
background: #fff;
border-radius: 50%;
transform: translate(-25%, 60%);
animation: cssWave 5s linear infinite;
}
@keyframes cssWave {
0% { transform: translate(-25%, 60%) rotate(0deg); }
100% { transform: translate(-25%, 60%) rotate(360deg); }
}方法三：CSS径向渐变
通过radial-gradient创建静态波浪纹理。
.gradient-wave {
height: 200px;
background:
radial-gradient(circle at 50% 0, transparent 25%, #4a90e2 25.5%, #4a90e2 36%, transparent 36.5%),
radial-gradient(circle at 50% 100%, transparent 24%, #4a90e2 24.5%, #4a90e2 36%, transparent 36.5%);
background-size: 100px 50px;
}方法四：CSS clip-path
使用clip-path属性裁剪出波浪形状。
.clip-wave {
height: 200px;
background: #4a90e2;
clip-path: path('M0,40 C30,10 70,70 100,40 C130,10 170,70 200,40 L200,0 L0,0 Z');
}注意事项
- SVG方法兼容性最好且可精细控制波形
- 纯CSS方案在移动端可能有性能考量
- 动态效果建议使用
transform而非margin等属性以保证性能 - 波浪颜色和尺寸可通过CSS变量方便调整
