模板效果

点击查看效果

模板代码

<section style="overflow: hidden;">
    <!-- 螺蛳粉的内容 -->
    <section style="width: 345px;height: 0;margin: 0px auto;text-align: center;line-height: 0;font-size:0;" data-author="公众号：懂点君">
        <svg name="请选择美食的图片" style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQRjddEKibgn698jtH2GfRVYdar9VWnoOLWBdeSZpS0uL0IuibJgh6VDOiaZLH30lKZicqibXRMFGFrssg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;" viewBox="0 0 750 1000"></svg>
        <svg name="第1张图片" style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQRjddEKibgn698jtH2GfRVYRyPmibUjFYIjZ7PQczva2OOXtt7xetmbES6wyrnI0e6PWAnrRTs5ibYw/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>
        <svg name="第2张图片" style="display: inline-block;margin-top: -1px;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQRjddEKibgn698jtH2GfRVY59WdVOcaZ6XXkJcYhwpY3g6LtFNtfPFhdvibFoq1o9y2mC3pL59I6qA/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>
        <svg name="第3张图片" style="display: inline-block;margin-top: -1px;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQRjddEKibgn698jtH2GfRVYAIDTtW7nb9sEdKliavqhSyL3WjU2LlLGIFErdVCLmYGBrTGNB5QibSzQ/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>
        <svg name="第4张图片" style="display: inline-block;margin-top: -1px;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQRjddEKibgn698jtH2GfRVYt6OgBIHd3vtIQibYEhw1lRyFjy7BYC7Q1CTZDJyNs9cVuVvYn0ianhVA/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>
    </section>
    <section style="width: 345px;margin: 0px auto;text-align: center;line-height: 0;font-size: 0;pointer-events: none;transform: rotateZ(0deg);" data-author="公众号：懂点君">
        <svg width="345" height="460" style="display: inline-block;max-width: none!important;pointer-events: none;" data-author="公众号：懂点君">
            <g>
                <foreignObject x="0" y="0" width="345" height="1840">
                    <svg viewBox="0 0 345 1840" opacity="0">
                        <!-- 显示火锅的动画 -->
                        <animate attributeName="opacity" fill="freeze" restart="never" keyTimes="0;0.000000001;1" values="0;1;1" dur="3100s" begin="click" ></animate>
                        <g>
                            <!-- 火锅按钮 -->
                            <circle fill="#000" cx="173" cy="157" r="75" pointer-events="painted" opacity="0"></circle>
                            <!-- 火锅的内容 -->
                            <foreignObject x="0" y="459" width="345" height="345">
                                <svg name="第1张图片" style="display: block;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQRjddEKibgn698jtH2GfRVYiaZyfLzK32188Ijia7kniaG9DF2ExNicPzNn8pC8oDBnm9LBcAZTAwwkaA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>
                            </foreignObject>
                            <foreignObject x="0" y="804" width="345" height="345">
                                <svg name="第2张图片" style="display: block;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQRjddEKibgn698jtH2GfRVYNDzu8367PCIsQuS80GnJEftAedz6fH41ssfnG6BqIR1KcfTEfvT07g/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>                                
                            </foreignObject>
                            <foreignObject x="0" y="1149" width="345" height="345">
                                <svg name="第3张图片" style="display: block;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQRjddEKibgn698jtH2GfRVY1WP9oTLbwrxwrowianyicjOzRfVKwcyjVTGPvTvI8WJHTj6lKmXTwzKQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>                                
                            </foreignObject>
                            <foreignObject x="0" y="1493" width="345" height="345">
                                <svg name="第4张图片" style="display: block;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQRjddEKibgn698jtH2GfRVYgtHol7CvR9Urey4GB2ia9hKNfl6o9yXBiaF62NOhg8gxbgzEDKj6fIOQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;font-size:0;" viewBox="0 0 750 750"></svg>                                
                            </foreignObject>
                        </g>
                    </svg>
                </foreignObject>
            </g>
            <!-- 螺蛳粉按钮 -->
            <circle fill="#000" cx="173" cy="350" r="75" pointer-events="painted" opacity="0" data-author="公众号：懂点君"></circle>
            <!-- 撑开高度的动画 -->
            <animate attributeName="height" fill="freeze" restart="never" calcMode="spline" keySplines="0.52 0 0.68 1.0; 0.52 0 0.68 1.0" keyTimes="0;0.005;1" values="460;1840;1840" dur="2000s" begin="click" data-author="公众号：懂点君"></animate>
        </svg>
    </section>
</section>