原型

<section style="width:100%;background-image: url();background-repeat: no-repeat;background-position: 0% 0%;background-size: 100%">
<svg height="750px" style="width:100vw;" x="0px" y="0px">
<animate attributeName="height" begin="click" dur="6000s" fill="freeze" keyTimes="0;0.01;1" values="750px;7400px;7400px">
</animate>
</svg>
</section>
    // 参数根据实际情况填写

底部覆盖遮罩制作（如信封不断拉开）

    <section style="width:100%;background-image: url();background-repeat: no-repeat;background-position: 0% 0%;background-size: 100%">
    <svg height="750px" style="width:100vw;" x="0px" y="0px">
    <animate attributeName="height" begin="click" dur="6000s" fill="freeze" keyTimes="0;0.01;1" values="750px;7400px;7400px">
    </animate>
    </svg>
    </section>
    <p style="margin-top:-130px;pointer-events:none;">
        <img src="">
    </p>
    // 参数根据实际情况填写