模板效果

点击查看效果

模板代码

<section style="overflow: hidden;display: inline-block;width: 100%;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;vertical-align: top;box-sizing: border-box;">
    <!---------------------------- 结果区域 -------------------------->
    <section style="height: 0px;overflow: visible;box-sizing: border-box;">
        <section style="box-sizing: border-box;padding:18px;">
            <section style="max-width: 100%;vertical-align: middle;display: inline-block;line-height: 0;box-shadow: rgb(128, 128, 128) 5px 5px 3px;box-sizing: border-box;">
                <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRjB4qKqycevmGGmUuFGQZQ8as6hc3WUh3vWibHOZF9GoDNRfURTj2BBeTJQGtA5OEicaptN7BpW7XQ/0?wx_fmt=png" alt="" />
            </section>
        </section>
    </section>
    <!-------------------------- 互动区域 -------------------------->
    <section style="height: 0px;overflow: visible;box-sizing: border-box;">
        <section style="width: 100%;vertical-align: top;height: auto;">
            <section style="height: 0px;">
                <svg opacity="1" style="box-sizing: border-box;background-size: 100%;background-repeat: no-repeat;background-position: center center;background-color: #fff;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRjB4qKqycevmGGmUuFGQZQT82ic2vibnmP4icJbeib9B3TPNMicFic6DRz9Yq9bCvNMLP7RvzREoXf6bxw/0?wx_fmt=png);width: 100%;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                    <animate fill="freeze" attributeName="opacity" begin="click" from="1" to="0" dur="1" restart="never"></animate>
                    <animate fill="freeze" attributeName="width" begin="click + 1s" from="1" to="0" dur="0.01" restart="never"></animate>
                </svg>
            </section>
        </section>
    </section>
    <!-------------------------- 占位（撑开）区域 -------------------------->
    <section style="height: 0px;padding-top: 100%;box-sizing: border-box;"></section>
</section>