css3 海浪效果 |css做渐变背景

/* 创建波浪基本样式 */
.wave {
position: relative;
width: 100%;
height: 100px;
background-color: #00bfff;
overflow: hidden;
}
/* 创建波浪效果 */
.wave:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 100%);
background-repeat: no-repeat;
background-size: 50% 100%;
animation: wave 2s infinite linear;
}
/* 创建波浪动画 */
@keyframes wave {
0% {
transform: translateX(0%);
background-position: 0 100%;
}
100% {
transform: translateX(-50%);
background-position: -50% 100%;
}
}

如上所示，大家首先创建了一个名为 wave 的 div 元素，设置了宽度、高度和背景色，同时隐藏 overflow 属性以避免内容溢出。接着，大家创建了一个名为 wave:before 的伪元素，用来展示波浪效果。大家为其设置了绝对定位，将其铺满波浪容器，然后使用 linear-gradient 属性绘制出一条白色的线性渐变。这里需要注意的是，大家设定的 background-size 为 50% 100%，这是因为大家需要让波浪效果重复 2 次。同时，大家设置了一个名为 wave 的动画，来控制波浪的移动。在动画中，大家使用了 transform 和 background-position 属性，使波浪更加自然流畅。

最后，大家只需要在 HTML 文件中使用 wave 类名即可实现这个动态效果。以上就是关于 CSS3 海浪效果的完整代码和实现方式。希望可以对你的网页设计和开发有所启发。