css图片底部波浪 |如何关闭窗口 js css

.wave {
position: relative;
height: 150px;
width: 100%;
background: #ffffff;
}
.wave::before {
content: "";
display: block;
position: absolute;
bottom: 0;
height: 15px;
width: var(--wave-width, 100%);
background: url("wave.svg") repeat-x;
background-size: 50%;
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
background-position-x: 0%;
}
100% {
background-position-x: -100%;
}
}

以上代码实现了一个白色的波浪底图案。其中，.wave是一个父级容器，用来包裹整个波浪图案。该容器的高度和背景色可以根据需求进行设置。

接着，通过伪元素::before来创建一个单独的图层，并将它定位到父级容器底部。该元素的高度为15px，并且使用CSS的background属性设置图片的背景和大小。在这里，大家使用了一个叫做wave.svg的SVG图片，它会不断重复平铺。同时，通过动画@keyframes来实现图案的动画效果。

最后，可以通过修改CSS变量--wave-width的值来调整波浪图案的宽度。这是一种方便快捷的方法，可以根据实际情况进行灵活调整。

总的来说，CSS图片底部波浪是一种简单而美观的设计效果，可以为网站增加趣味和互动性。借助一些基本的代码，大家可以轻松实现这种效果，为网站带来更好的用户体验。