当前位置：首页 > CSS

用css制作海浪

2026-03-11 19:06:51CSS

CSS制作海浪效果

使用CSS可以创建多种海浪效果，以下是几种常见的方法：

使用border-radius和动画

通过border-radius属性和关键帧动画可以模拟波浪运动：

.wave {
  width: 200px;
  height: 100px;
  background: #1e90ff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% {
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
  50% {
    border-radius: 40% 60% 0 0 / 80% 120% 0 0;
  }
}

SVG波浪路径

使用SVG创建更精确的波浪形状，然后通过CSS动画使其移动：

<div class="wave-container">
  <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M0,0 L0,40 C150,100 350,0 500,40 C650,-20 850,100 1000,40 L1200,40 L1200,0 Z" fill="#1e90ff"></path>
  </svg>
</div>

.wave-container {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.wave-container path {
  animation: wave 8s linear infinite;
}

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

多重波浪效果

创建多层波浪以增加深度感：

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

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.wave-top {
  background-size: 50% 100px;
  animation: wave 3s linear infinite;
}

.wave-middle {
  background-size: 50% 80px;
  animation: wave 5s linear infinite;
}

.wave-bottom {
  background-size: 50% 60px;
  animation: wave 7s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.9);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}

使用CSS clip-path

clip-path属性可以创建复杂的波浪形状：

用css制作海浪

.wave {
  width: 100%;
  height: 100px;
  background: linear-gradient(to right, #1e90ff, #00bfff);
  clip-path: path('M0,0 L0,40 Q150,80 300,40 Q450,0 600,40 Q750,80 900,40 Q1050,0 1200,40 L1200,0 Z');
  animation: wave 5s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% {
    clip-path: path('M0,0 L0,40 Q150,80 300,40 Q450,0 600,40 Q750,80 900,40 Q1050,0 1200,40 L1200,0 Z');
  }
  50% {
    clip-path: path('M0,0 L0,60 Q150,20 300,60 Q450,0 600,60 Q750,20 900,60 Q1050,0 1200,60 L1200,0 Z');
  }
}

这些方法可以根据需要调整颜色、大小和动画参数来创建不同风格的海浪效果。SVG方法通常能提供最平滑的波浪形状，而纯CSS方法则更轻量且易于修改。