喜迎
新春
首页 SVG交互🌀

原型

<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>
// 参数根据实际情况填写



文章评论