模板效果

点击查看效果

模板代码

<section style="line-height: 0;overflow: hidden;">
    <!-- 长图内容 -->
    <section style="height: 0;" data-author="公众号：懂点君">
        <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfHdhYpqjUQeVHJicmflvx1xYibOCB5ANibkIRZ62KeDV0BL599UibM2mT9g/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;"></svg>
        <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfgVxgMMTPrczc7aVXeXzMHb2w8bvIK17WBv92gskPaPmLw8Mqicxe6Gg/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;"></svg>
        <svg viewbox="0 0 1000 1778" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfKr6cyiaIV5NV9za1Qcdw05TfGLjXyQCMrno8VspMPykH3Iibic0Fea21Q/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;"></svg>
        <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzficTJpgEoJV4iavwXxiaia0FsjMPDkJlkTAR37Lo3zpuYpzQC9taCY4FsyA/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;"></svg>
    </section>
    <!-- 播放gif -->
    <svg viewbox="0 0 2000 2000" style="display: block;max-width: none!important;width: 100%;background: #fff url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfjRxCUO8IM0t8j1JZfwLkaaj2zXVJYo0KmQYlWlCeBDhaV7Wf3P7o6w/0?wx_fmt=png) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;" data-author="公众号：懂点君">
        <!-- 展开长图 -->
        <animate attributeName="width" values="100%;711.5%;711.5%" keyTimes="0;.0001;1" dur="50000s" begin="click+3s" fill="freeze" restart="never"></animate>
        <!-- 使用透明度隐藏svg的内容 -->
        <animate attributeName="opacity" values="1;0;0" keyTimes="0;.0001;1" dur="400s" begin="click+3s" fill="freeze" restart="never"></animate>
        <g>
            <!-- 移动gif，目的是触发gif播放 -->
            <animateTransform attributeName="transform" type="translate" values="0 0;-2000 0;-2000 0" keyTimes="0;.0000001;1" dur="400s" begin="click" fill="freeze" restart="never"></animateTransform>
            <!-- 放置gif -->
            <foreignObject x="2000" y="0" width="2000" height="2000">
                <svg viewbox="0 0 2000 2000" style="display: block;width: 100%;background: #fff url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfHA66yM4geWa1jxOlGPGsJjpHOuhhgJLEycEaYWw96AIYCS2YGqibSDA/0?wx_fmt=gif) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;"></svg>
            </foreignObject>
            <g>
                <!-- 把rect隐藏并移出可视区域，目的是防止用户重复点击 -->
                <animateTransform attributeName="transform" type="translate" values="0 0;9999 0;9999 0" keyTimes="0;.0000001;1" dur="400s" begin="click" fill="freeze" restart="never"></animateTransform>
                <set attributeName="visibility" from="visible" to="hidden" dur="0.3s" begin="click" fill="freeze" restart="never"></set>
                <rect x="0" y="0" width="2000" height="2000" opacity="0" style="pointer-events: visible;"></rect>
            </g>
        </g>
    </svg>
</section>