案例代码

<section style="width: 345px;margin: 0px auto;font-size: 0px;line-height: 0;">
    <section style="overflow: hidden;">
        <section style="height: 0px;">
            <section style="padding-top: 500px;margin: 0px auto;font-size: 0px;line-height: 0;">
                <section style="width: 345px;height: 2500px;background-position: 0px 0px;background-repeat: no-repeat;background-size: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS3XzaoEexZuQycqusR5zvgmp9rnRyDoIBz1iag3bLZrKasw1m5iaDTlvrY1vpJocku4kwK6IvEgRHA/0?wx_fmt=jpeg);"></section>
            </section>
        </section>
        <section style="background-position: 0px 0px;background-size: 100% 500px;background-repeat: no-repeat;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS3XzaoEexZuQycqusR5zvgLHQfib9uS78vUI4rG4RZvJOAJibLeykkA1xaNJ32Ku3ZgMyeu283LIbQ/0?wx_fmt=jpeg);">
            <svg height="500px" style="background-size: 100% 500px; background-repeat: no-repeat;background-position: center top;background-color: rgb(0, 0, 0);background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS3XzaoEexZuQycqusR5zvg1ymWUDTGBkHF6ia3qCm7EwcuYJb2lkDsFuV89RQS9lPaiaLop1z7RZ6g/0?wx_fmt=jpeg);width: 100%;height: 500px;" viewBox="0 0 345 500" xmlns="http://www.w3.org/2000/svg" width="1">
                <animate attributeName="width" style="box-sizing: border-box;" fill="freeze" to="0" from="100" duration="0.01" begin="click+0.6s"></animate>
                <animate attributeName="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.01s" begin="click+0.6s" from="1" to="0"></animate>
                <animate attributeName="height" fill="freeze" restart="never" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0" values="500; 0; 3000; 3000" dur="6s" begin="click+0.1s" keyTimes="0; 0.1; 0.5; 1"></animate>
            </svg>
        </section>
    </section>
</section>