当前位置：首页 > CSS

css制作海浪

2026-04-01 08:58:03CSS

使用CSS制作海浪效果

通过CSS的border-radius和animation属性可以模拟海浪的动态效果。以下是两种常见方法：

基础波浪效果

通过椭圆形状和动画实现简单波浪：

.wave {
  width: 200px;
  height: 100px;
  background: #4bc0c8;
  border-radius: 50% 50% 0 0;
  animation: wave 3s linear infinite;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

SVG路径波浪

使用SVG结合CSS实现更精确的波浪控制：

<svg class="wave-svg" viewBox="0 0 1440 320">
  <path 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>

.wave-svg {
  width: 100%;
  height: 100px;
  animation: waveMove 8s linear infinite;
}

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

多层波浪叠加

创建更真实的海洋效果：

css制作海浪

.wave-container {
  position: relative;
  height: 150px;
  overflow: hidden;
}

.wave-layer {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100px;
  background: #4bc0c8;
  border-radius: 50%;
  animation: waveFlow 10s linear infinite;
}

.wave-layer:nth-child(1) {
  opacity: 0.7;
  animation-delay: 0s;
}

.wave-layer:nth-child(2) {
  opacity: 0.5;
  animation-delay: -2s;
}

@keyframes waveFlow {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(-25%) rotate(180deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}