CSS 实现波浪效果

最新推荐文章于 2025-05-17 21:29:49 发布

前端小天才小肚

最新推荐文章于 2025-05-17 21:29:49 发布

阅读量523

点赞数 4

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_66118130/article/details/147071582

思路

绘制两个曲面拼接起来，就形成了波浪形。

使用 radial-gradient 绘制曲面。

scss

代码解读

复制代码

radial-gradient( [size] at [position], /* 形状和位置 */ [color-stop1], /* 颜色断点1 */ [color-stop2] /* 颜色断点2 */ ) /* 举例： */ background: radial-gradient(90% 50% at 20% 100%, #fff 98%, var(--color) 99%)

Size（大小）：90% 50%

第一个值：渐变椭圆的宽度，第二个值：渐变椭圆的高度；也可以使用关键字：circle（圆形）或 ellipse（椭圆形）。

改变波浪形状大小： 增大90%缩小50%可以让波浪更宽，反之更窄。

Position（位置）：at 20% 100%

at 后面的值定义渐变的中心点。第一个值：水平位置（left, center, right 或百分比），第二个值：垂直位置（top, center, bottom 或百分比）。

移动波浪的位置： 缩小/增大20%会左/右移动波浪的位置。

Color Stops（颜色断点）：#fff 98%, var(--color) 99%

每个颜色断点包含：颜色值 + 位置值（百分比），可以有多个颜色断点。

绘制曲面代码

scss

代码解读

复制代码

.wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(100% 57% at bottom,#0000 100%, #2196F3 100.5%) no-repeat; background-size: 50% 100%; background-position: 0 100%; background-repeat: no-repeat; }

绘制波浪代码

scss

代码解读

复制代码

.wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; --color: #2196F3; --w1: radial-gradient(100% 57% at bottom,#0000 100%, var(--color) 100.5%) no-repeat; --w2: radial-gradient(100% 58% at top, var(--color) 100%,#0000 100.5%) no-repeat; background: var(--w1), var(--w2); background-size: 50% 100%, 50% 100%; background-position: 0 100%, 100% 100%; background-repeat: no-repeat; }

具体使用需要自行调节 radial-gradient，background-size，background-position 的值，使形状衔接流畅。调整 background-size 的百分比会改变波浪的覆盖范围，调整 background-position 的值会改变两个渐变图案的重叠程度。