CSS3中波形渐变 |css 图片背景加长

.background {
background: linear-gradient(to right, #1E90FF 0%, #7B68EE 50%, #00BFFF 100%);
background-size: 100% 200%;
animation: wave 4s infinite linear;
}
@keyframes wave {
0% {
transform: translateX(0) translateY(0) translateZ(0) scaleY(1);
}
50% {
transform: translateX(0) translateY(-25%) translateZ(0) scaleY(1.5);
}
100% {
transform: translateX(0) translateY(0) translateZ(0) scaleY(1);
}
}

在以上代码中，大家定义了一个背景样式，并使用了linear-gradient属性来实现波形渐变。大家使用to right来定义颜色梯度的方向。在波形渐变的过程中，大家使用了三种不同的颜色，它们分别是#1E90FF，#7B68EE和#00BFFF。

为了实现波浪形效果，大家还需要定义其大小和动画效果。大家使用了background-size属性来定义背景的大小，其中第一个参数是水平方向的大小，第二个参数是垂直方向的大小。大家将垂直方向的大小设置为背景宽度的两倍，这样就能够实现波浪形效果。

最后，大家使用了animation属性来定义动画效果。大家将其设置为4秒，无限循环，并使用linear来定义线性方式。大家还定义了三个关键帧：0%，50%和100%。在50%关键帧中，大家对元素进行了平移和缩放，以达到波浪形效果。