中学网站建设方案十堰哪家网站制作公司技术好

参考文章：巧妙使用 CSS 渐变来实现波浪动画_css实现波浪动效-CSDN博客

思路

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

使用 radial-gradient 绘制曲面。

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%

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

绘制曲面代码

.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;
}

绘制波浪代码

.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 的值会改变两个渐变图案的重叠程度。

具体实现

登录页背景

代码

<template><view class="wave-container">  <view class="wave1"></view><view class="wave2"></view><view class="wave3"></view></view>
</template>

<style lang="scss" scoped>
.wave-container {  position: relative;  width: 100%;height: 300px;overflow: hidden;
}
.wave1 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;--color: #487CF5;--w1: radial-gradient(95% 56.8% at 50% 100%,#0000 100%, var(--color) 100.5%) no-repeat;--w2: radial-gradient(150% 46.8% at 70% 10%, var(--color) 100%,#0000 100.5%) no-repeat;background: var(--w1), var(--w2);background-size: 70% 100%, 30% 100%;background-position: 0 100%, 100% 100%;background-repeat: no-repeat;z-index: 0;
}
.wave2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;--color: #819adf;--w1: radial-gradient(95% 53% at 38% 100%,#0000 100%, var(--color) 100.5%) no-repeat;--w2: radial-gradient(160% 56.8% at 80% 10%, var(--color) 100%,#0000 100.5%) no-repeat;background: var(--w1), var(--w2);background-size: 70% 100%, 30% 100%;background-position: 0 100%, 100% 100%;background-repeat: no-repeat;z-index: -1;opacity: 0.1; // 使用透明度实现叠加效果
}
.wave3 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;--color: #E8F2FB;--w1: radial-gradient(140% 24% at 50% 80%,#0000 100%, var(--color) 100.5%) no-repeat;--w2: radial-gradient(80% 51% at 30% 10%, var(--color) 100%,#0000 100.5%) no-repeat;background: var(--w1), var(--w2);background-size: 20% 100%, 80% 100%;background-position: 0 100%, 100% 100%;background-repeat: no-repeat;z-index: -2;
}
</style>