我用的是盒子萌的主题,其它主题自己用f12看着添加

header.php里的

 <div class=”separator separator-bottom separator-skew”>
<canvas id=”canvas”></canvas>
</div>

修改成

<section class=”main-hero-waves-area waves-area”>
<svg class=”waves-svg” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” viewBox=”0 24 150 28″ preserveAspectRatio=”none” shape-rendering=”auto”>
<defs>
<path id=”gentle-wave” d=”M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z”></path>
</defs>
<g class=”parallax”>
<use xlink:href=”#gentle-wave” x=”48″ y=”0″></use>
<use xlink:href=”#gentle-wave” x=”48″ y=”3″></use>
<use xlink:href=”#gentle-wave” x=”48″ y=”5″></use>
<use xlink:href=”#gentle-wave” x=”48″ y=”7″></use>
</g>
</svg>
</section>

外观-自定义-额外css

.main-hero-waves-area {
width : 100%;
position: absolute;
left : 0;
z-index : 0;
}

.main-hero-waves-area {
bottom: -5px;
}

.waves-area .waves-svg {
width : 100%;
height: 5rem
}

.waves-area .parallax>use {
-webkit-animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
animation : move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
}

.waves-area .parallax>use:first-child {
-webkit-animation-delay : -2s;
animation-delay : -2s;
-webkit-animation-duration: 7s;
animation-duration : 7s;
fill : hsla(0, 0%, 100%, .7)
}

.waves-area .parallax>use:nth-child(2) {
-webkit-animation-delay : -3s;
animation-delay : -3s;
-webkit-animation-duration: 10s;
animation-duration : 10s;
fill : hsla(0, 0%, 100%, .5)
}

.waves-area .parallax>use:nth-child(3) {
-webkit-animation-delay : -4s;
animation-delay : -4s;
-webkit-animation-duration: 13s;
animation-duration : 13s;
fill : hsla(0, 0%, 100%, .3)
}

.waves-area .parallax>use:nth-child(4) {
-webkit-animation-delay : -5s;
animation-delay : -5s;
-webkit-animation-duration: 20s;
animation-duration : 20s;
fill : var(–bs-light)
}

@-webkit-keyframes move-forever {
0% {
transform : translate3d(-90px, 0, 0)
}

to {
transform : translate3d(85px, 0, 0)
}
}

@keyframes move-forever {
0% {
transform : translate3d(-90px, 0, 0)
}

to {
transform : translate3d(85px, 0, 0)
}
}