css制作海浪
使用CSS制作海浪效果
使用border-radius和box-shadow创建波浪形状
通过调整border-radius和box-shadow可以模拟波浪形状。以下是一个简单的波浪效果示例：
.wave {
width: 200px;
height: 100px;
background: #4bc0c8;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}使用CSS动画实现波浪运动
通过关键帧动画让波浪产生动态效果：
@keyframes wave-motion {
0% { transform: translateX(0) translateY(5px); }
50% { transform: translateX(20px) translateY(-5px); }
100% { transform: translateX(0) translateY(5px); }
}
.wave-animated {
animation: wave-motion 3s ease-in-out infinite;
}使用SVG和CSS结合
更精确的波浪效果可以通过内联SVG实现：
<div class="wave-container">
<svg viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>多层波浪叠加效果
创建多个波浪层并设置不同的动画参数可以增强真实感：
.wave-layer {
position: absolute;
width: 200%;
height: 100%;
background-repeat: repeat-x;
animation: wave 7s linear infinite;
}
.wave-layer:nth-child(2) {
animation-delay: -5s;
opacity: 0.7;
}
@keyframes wave {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-50%) translateY(-20px); }
}使用CSS变量控制波浪参数
通过CSS变量可以更方便地调整波浪属性：
:root {
--wave-color: #4bc0c8;
--wave-height: 100px;
--wave-width: 200px;
}
.wave {
width: var(--wave-width);
height: var(--wave-height);
background: var(--wave-color);
}响应式波浪设计
使用百分比单位和视窗单位确保波浪在不同设备上显示良好：
.wave-responsive {
width: 100vw;
height: 15vh;
min-height: 100px;
}这些方法可以根据具体需求组合使用，创造出各种不同的海浪效果。SVG方法适合需要精确控制波浪形状的场景，而纯CSS方法则更轻量且易于动画控制。
