当前位置：首页 > CSS

用css制作海浪

2026-01-28 12:07:17CSS

使用CSS制作海浪效果

通过CSS的border-radius和动画属性可以模拟海浪起伏的效果。以下是一种实现方法：

HTML结构

用css制作海浪

<div class="wave-container">
  <div class="wave"></div>
</div>

CSS样式

用css制作海浪

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

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: #0099ff;
  border-radius: 50% 50% 0 0;
  animation: wave 5s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-25%) translateY(-20px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

多层海浪增强效果

通过叠加多个波浪元素并设置不同的动画延迟，可以创建更逼真的海浪效果：

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  animation: wave 7s linear infinite;
}

.wave:nth-child(1) {
  background: rgba(0, 153, 255, 0.7);
  animation-delay: 0s;
}

.wave:nth-child(2) {
  background: rgba(0, 153, 255, 0.5);
  animation-delay: -1s;
  bottom: 10px;
}

.wave:nth-child(3) {
  background: rgba(0, 153, 255, 0.3);
  animation-delay: -2s;
  bottom: 20px;
}

SVG波浪替代方案

使用SVG路径可以创建更精确的波浪形状：

<div class="wave-svg">
  <svg viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1" d="M0,256L48,261.3C96,267,192,277,288,245.3C384,213,480,139,576,128C672,117,768,171,864,181.3C960,192,1056,160,1152,149.3C1248,139,1344,149,1392,154.7L1440,160L1440,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-svg {
  position: relative;
  height: 150px;
}

.wave-svg svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: waveMove 10s linear infinite;
}

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

这些方法都可以创建不同风格的海浪效果，可以根据实际需求调整颜色、大小和动画参数。SVG方法适合需要精确控制波浪形状的场景，而纯CSS方法实现更简单快捷。