模板效果

【打开查看效果】

模板代码

<!-- gif播放 -->
<section style="height:0;vertical-align:top;">
    <!-- gif第一帧图 -->
    <section style="display: inline-block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFqX1yGjMwiaVDr2RLdicnVDFDeOOTcNwBKw4Tp85eh1jW7MUxPibsP1GrYv53tuUGpYRGfCOrEFwyQ/0?wx_fmt=png);vertical-align: top;-webkit-tap-highlight-color: transparent;user-select: none;">
        <!-- gif图片 -->
        <svg opacity="0" space="preserve" style="display: inline-block;width: 100%;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqTFqX1yGjMwiaVDr2RLdicnVDPpAkHq8wbnKLGfmU3JBzguZLpOz28mNBJIBoVteSLNuc2lryWmbzyw/0?wx_fmt=gif);vertical-align: top;-webkit-tap-highlight-color:transparent;" version="1.1" viewBox="0 0 842 596" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
            <!-- 通过控制opacity的值来触发gif的播放 -->
            <animate attributeName="opacity" begin="click" dur="60000s" values="1" restart="whenNotActive" fill="freeze"></animate>
        </svg>
    </section>
</section>
<!-- 撑开高度 -->
<section style="vertical-align:top;">
    <img style="vertical-align: top;width: 100% !important; height: auto !important; visibility: visible !important;opacity: 0;pointer-events: none;" src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFqX1yGjMwiaVDr2RLdicnVDFDeOOTcNwBKw4Tp85eh1jW7MUxPibsP1GrYv53tuUGpYRGfCOrEFwyQ/0?wx_fmt=png">
</section>

说明：

• 准备素材：GIF的第一帧图片和只循环一次的GIF图片（可以在Photoshop里修改GIF只循环播放一次：GIF图片保存时用“存储为Web所用格式”的选项，然后在循环选项里选择使用“一次”，点击保存即可完成修改）；
• 通过点击设置SVG的透明度属性来控制GIF的播放；