CSS 实现一个动态水形波浪蒙版层

需求的最终实现效果，如下图，在盒子表面，绘制一个波浪形状的蒙版层（动态的）。

---

先定义一个，主体盒子块，等会儿的蒙版图层会覆盖到它的上面。

<div></div>

图层采用，SVG进行绘制，首先定义 SVG 的图层结构。但是这时候，图层虽然出来了，但还是静态的。

    <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" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0" />
            <use xlink:href="#gentle-wave" x="48" y="3" />
            <use xlink:href="#gentle-wave" x="48" y="5" />
            <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
    </svg>

配置 CSS 样式，定义动画，让图层能够循环的动起来。动画配置完成后，再通过定位，将动起来的图层，覆盖到想要放置的地方。

//定位放置到想要的位置
.waves {    
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    border-radius: 10px;
}

@mixin fill_backgroundcolor($backcoler) {
    fill: $backcoler;
}

//设置波峰的颜色
.parallax>use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    @include fill_backgroundcolor(rgb(179, 238, 220));
    opacity: 0.8;
}

// 为每一个波峰，分别设置，运动节奏，达到波浪参差不齐的运动表现。

.parallax>use:nth-child(1) {   
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {   //定义过度动画
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————