波浪特效

需要先引入相关的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>

<script src="static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>

示例代码

<style>
    .aui-content-top{width: 100%; height: 200px; font-size: 0; background: var(--aui-jianbian); position: relative;}
    /* Animation */
    .contnet-top-animation{width: 100%; position: absolute; bottom: 0; left: 0}
    .parallax > use {opacity: 0.9;animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
    .waves {position:relative; width: 100%; height:15vh; min-height:100px; max-height:150px;}
    .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);}
    }
    /*Shrinking for mobile*/
    @media (max-width: 768px) {
        .waves {height:50px; min-height:40px; }
        h1 {font-size:24px;}
    }
</style>
<div class="container">
    <header class="aui-header">
        <a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
        <div class="aui-header-title">波浪</div>
    </header>
    <div class="aui-content">
        <div class="aui-content-top">
            <div class="contnet-top-animation">
                <svg class="waves" 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="1" fill="rgba(255,255,255,1" />
                        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.7)" />
                        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.5)" />
                        <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.3)" />
                    </g>
                </svg>
            </div>
        </div>
    </div>
</div>