当前位置：首页 > CSS

css制作波浪

2026-04-01 06:47:33CSS

使用CSS制作波浪效果

CSS可以通过多种方式实现波浪效果，以下是几种常见的方法：

使用SVG和CSS结合

在HTML中嵌入SVG路径，通过CSS控制其样式和动画：

<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
  <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="wave"></path>
</svg>

.wave {
  fill: #4a90e2;
  animation: wave 8s linear infinite;
}

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

使用CSS渐变和动画

通过CSS的径向渐变和动画属性创建波浪效果：

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

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: radial-gradient(circle at 50% -25%, #4a90e2, transparent 70%);
  animation: wave 4s linear infinite;
}

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

使用CSS clip-path属性

利用clip-path的贝塞尔曲线创建波浪形状：

.wave {
  width: 100%;
  height: 100px;
  background-color: #4a90e2;
  clip-path: path('M0,0 C150,50 350,0 500,50 S850,0 1000,50 L1000,100 L0,100 Z');
  animation: wave 3s ease-in-out infinite alternate;
}

@keyframes wave {
  0% { clip-path: path('M0,0 C150,50 350,0 500,50 S850,0 1000,50 L1000,100 L0,100 Z'); }
  100% { clip-path: path('M0,0 C150,75 350,25 500,75 S850,25 1000,75 L1000,100 L0,100 Z'); }
}

使用CSS border-radius和transform

通过多个椭圆元素叠加和动画创建波浪效果：

css制作波浪

.wave {
  position: relative;
  height: 100px;
  overflow: hidden;
}

.wave:before, .wave:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  bottom: 0;
  border-radius: 45%;
  background-color: rgba(74, 144, 226, 0.8);
  animation: rotate 10s linear infinite;
}

.wave:after {
  border-radius: 47%;
  background-color: rgba(74, 144, 226, 0.5);
  animation: rotate 7s linear -5s infinite;
}

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

这些方法可以根据具体需求进行调整，修改颜色、动画时间和波浪形状以达到理想效果。