当前位置：首页 > CSS

css制作波浪

2026-01-28 04:11:46CSS

CSS制作波浪效果的方法

方法一：使用SVG和CSS

通过SVG创建波浪路径，结合CSS动画实现动态效果。

<div class="wave-container">
  <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M0,0 C150,180 350,0 500,120 C650,240 850,120 1200,120 L1200,0 Z" class="wave"></path>
  </svg>
</div>

.wave-container {
  width: 100%;
  overflow: hidden;
}
.wave {
  fill: #4a90e2;
  animation: wave 3s ease-in-out infinite alternate;
}
@keyframes wave {
  0% { transform: translateX(0) translateY(10px); }
  100% { transform: translateX(-50px) translateY(-10px); }
}

方法二：纯CSS伪元素

利用border-radius和伪元素创建波浪形状。

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

.css-wave {
  position: relative;
  height: 150px;
  background: #4a90e2;
  overflow: hidden;
}
.css-wave::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 50%;
  transform: translate(-25%, 60%);
  animation: cssWave 5s linear infinite;
}
@keyframes cssWave {
  0% { transform: translate(-25%, 60%) rotate(0deg); }
  100% { transform: translate(-25%, 60%) rotate(360deg); }
}

方法三：CSS径向渐变

通过radial-gradient创建静态波浪纹理。

.gradient-wave {
  height: 200px;
  background: 
    radial-gradient(circle at 50% 0, transparent 25%, #4a90e2 25.5%, #4a90e2 36%, transparent 36.5%),
    radial-gradient(circle at 50% 100%, transparent 24%, #4a90e2 24.5%, #4a90e2 36%, transparent 36.5%);
  background-size: 100px 50px;
}

方法四：CSS clip-path

使用clip-path属性裁剪出波浪形状。

.clip-wave {
  height: 200px;
  background: #4a90e2;
  clip-path: path('M0,40 C30,10 70,70 100,40 C130,10 170,70 200,40 L200,0 L0,0 Z');
}

注意事项

css制作波浪

SVG方法兼容性最好且可精细控制波形
纯CSS方案在移动端可能有性能考量
动态效果建议使用transform而非margin等属性以保证性能
波浪颜色和尺寸可通过CSS变量方便调整

标签: 波浪 css

分享给朋友：

css制作表格

使用HTML和CSS创建表格 HTML中的<table>元素用于创建表格，结合CSS可以调整样式。以下是一个基础示例： <table> <tr> &l…

用css制作网页

创建HTML文件结构新建一个index.html文件，写入基础HTML5结构。通过<link>标签引入外部CSS文件，示例结构如下： <!DOCTYPE html> <…

空间css制作

空间 CSS 制作方法使用 margin 和 padding 控制间距通过调整 margin（外边距）和 padding（内边距）属性，可以控制元素之间的空间。例如： .element {…

css怎么制作首字下沉

首字下沉的实现方法首字下沉是一种常见的排版效果，通过放大段落的首字母并使其下沉，可以增强文本的视觉吸引力。以下是几种实现方法：使用::first-letter伪元素通过CSS的::first-…

制作 .css

创建 CSS 文件的基本步骤新建一个文本文件，将其保存为 .css 扩展名（例如 style.css）。使用纯文本编辑器（如 Notepad++、VS Code 或 Sublime Text）编写…

怎么制作css

理解CSS基础 CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。CSS通过选择器匹配HTML元素，并为其定义样式规则。例如： p { color: blue; f…

css制作波浪