最近学习了一下css，悟到了一点点东西，那么就对这个当时还要去扒别人网站才能搞出来的波浪效果来个研究

css部分

:root 中的 --color-rgb 为波浪颜色，rgb格式 94, 114, 228; 可以自己用取色器取，也可以截图用ps滴管吸取。

.parallax>use:nth-child(1)以及下面的便是波浪了

其中animation-delay 等待多少秒，然后开始动画 我们选择负数比如 -2s 表示使动画马上开始，但跳过 2 秒进入动画。

其中animation-duration:为规定完成动画所花费的时间 ，越小速度越快

最后fill: rgba(var(--color-rgb), 0.7);部分 前部分为读取root中的颜色，后部分为透明度，也就是rgba标准格式

waves中min-height: 100px;和max-height: 150px;可自行调节，这个是波浪高度

:root{
	--color: #5e72e4;
	--color-rgb: 94, 114, 228;
	--wave-offset: 100px;
	--wave-hidden-offset: 300px;
	--transition-time: 1s;
}

.waves {
	position: relative;
	width: 100%;
	height: 15vh;
	margin-bottom: -7px;
	min-height: 100px;
	max-height: 150px;
}
#gentle-wave{
	fill: rgba(var(--color-rgb), 0.7);
}
.parallax>use {
	animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
	fill: rgba(var(--color-rgb), 0.7);
}
.parallax>use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
	fill: rgba(var(--color-rgb), 0.5);
}
.parallax>use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
	fill: rgba(var(--color-rgb), 0.3);
}
.parallax>use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
	fill: rgba(var(--color-rgb), 0.1);
}
@keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0);
	}
	100% {
		transform: translate3d(85px, 0, 0);
	}
}

html部分

<div style="position: absolute;z-index: 10;bottom:0; width:100%;">
				<svg class="waves" 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" class="transition-delay" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
					</defs>
					<g class="parallax">
						<use class="transition-delay" xlink:href="#gentle-wave" x="48" y="0"></use>
						<use class="transition-delay" xlink:href="#gentle-wave" x="48" y="3"></use>
						<use class="transition-delay" xlink:href="#gentle-wave" x="48" y="5"></use>
						<use class="transition-delay" xlink:href="#gentle-wave" x="48" y="7"></use>
					</g>
				</svg>
			</div>

位置

对于我使用的主题，在以下部位插入div即可

<?php
//https://api.mashiro.top/cover
?>
<!--DIV插在这。-->
<figure id="centerbg" class="centerbg">
<?php if ( !akina_option('focus_infos') ){ ?>
    <div class="focusinfo">
        <?php if (akina_option('focus_logo')):?>
……

其他主题自行判断

定位问题

有的人使用了live2d小人，或者网格遮罩，可以自行调节以下代码中的z-index: 10;的数值

<div style="position: absolute;z-index: 10;bottom:0; width:100%;">