公众号SVG图文『动画展开长图与音乐播放』模板代码
发布于 4 年前 作者 hanguiying 1187 次浏览 来自 分享

模板效果

点击查看效果

模板代码

<section style=" overflow: hidden;display: block;width: 340px;margin: 0 auto;background-color: #ececec;font-size: 0px;">
    <!-------------------------------------- 默认内容显示区域 ------------------------------------>
    <p>
        <img style="text-align: center;margin-bottom: -11px;width: 340px !important;height: auto !important;visibility: visible !important;" src="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0IbZb61I17X6B6NDqo5Df2lTHAgXaDFN8BQBrKkKCM13o7hQ3GGW7G0A/0?wx_fmt=jpeg">
    </p>
    <section style="overflow: hidden;display: block;text-align: center;">
        <section style="height: 0px;opacity: 0;width: 0px;">
            <p>懂点君 —— 我是懂点君,关注我,从此让你多懂点,少吃亏!</p>
        </section>
        <!-------------------------------------- 展开内容显示区域 ------------------------------------>
        <section style="height: 0px;display: block;pointer-events: none;">
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0I6jxFfKpYQrZQW29QqXUTBSE999clfHCKs1GibXLYvbs0Xu2y05RMwIg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0I7KDDpBoAHzKC310X4Hx3Xf3HMiaBVNas3TJjmTPbjgTSF37nDf1R9qA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0IAVHyYNB9BNwSPxCAhsic8NCFu6hTicK3CbySBeGibGcGYgnQsrZmr8rAw/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0IcUibZbiaG2ebnleAvMQy1So6tqCG3kggQxAoZcJHGa1d1ic6E6ibhlvqug/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0Ij8nzLSBR07B4eLJXggcwmZCI7mfSyC4PuQBj37c13Esd6IPy3c51yw/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0Im5niaiakmjbpNYFgQlkHwQAbQ68ZFBJZ8DEhrw3DKsfaquUUb0C8jLDw/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0IVCOAfHhIr19rM3akPQTXjOntfNS1NdnMDYX244WMliacTRvMWfsErQQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
            <section style="display: block;padding-top: 137.428%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSl2DzeO9iayu5jZQBjVKa0IDicxZACkwv6eWicVJG1S0ibu9KyOEk174LicTC9bMtzfLUcTb7IDAoFZIw/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;line-height: 0;"></section>
        </section>
        <!-------------------------------------- 互动区域 ------------------------------------>
        <section style="display: block;margin-left: auto;margin-right: auto;line-height: 0;text-align: center;">
            <svg style="pointer-events: none;max-width: none !important;" viewBox="0 0 345 106">
                <!-------------------------------------- 音乐区域 ------------------------------------>
                <foreignObject y="0" opacity="0" width="345" height="100">
                    <section style="pointer-events: painted;transform: scale(13) translate(-127px, 30px); opacity:0;">
                        <section>
                            <qqmusic class="js_editor_qqmusic js_uneditable" musicid="283990470" mid="000Iccf527qI3I" albumurl="https://y.gtimg.cn/music/photo_new/T002R68x68M000003Pn1X03X29HF.jpg" audiourl="http://isure6.stream.qqmusic.qq.com/C200000Iccf527qI3I.m4a?guid=2000001731&amp;vkey=1D73EA5C3739D37172A954289EC42D269F9748E2638A6FC1D23207C4982D3E04EDDC31B36BA9D744ABBCF176B041D6262D50BD108562ECDB&amp;uin=&amp;fromtag=50" music_name="德化美" singer="曾晓忠&nbsp;-&nbsp;闽南小中" play_length="224" src="/cgi-bin/readtemplate?t=tmpl/qqmusic_tmpl&amp;singer=%E6%9B%BE%E6%99%93%E5%BF%A0%20-%20%E9%97%BD%E5%8D%97%E5%B0%8F%E4%B8%AD&amp;music_name=%E5%BE%B7%E5%8C%96%E7%BE%8E&amp;albumurl=https%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R68x68M000003Pn1X03X29HF.jpg&amp;musictype=1" musictype="1" otherid="000Iccf527qI3I" albumid="003Pn1X03X29HF" jumpurlkey="" data-pluginname="insertaudio"></qqmusic>
                            <span id="qqmusic_main_283990470_0" class="js_wap_qqmusic db pages_reset music_area ">
                                <span class="tc tips_global unsupport_tips" style="display:none;">当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放</span>
                                <span class="db music_card appmsg_card_context appmsg_card_active">
                                    <a id="qqmusic_home_283990470_0" class="music_card_bd">
                                        <span class="music_card_title">德化美</span>
                                        <span class="music_card_desc">曾晓忠&nbsp;-&nbsp;闽南小中</span>
                                        <span class="music_card_source ">
                                            <img src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_source4abca9.svg" alt=""></span>
                                    </a>
                                    <span id="qqmusic_play_283990470_0" class="music_card_ft">
                                        <i class="weui-play-btn"></i>
                                        <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003Pn1X03X29HF.jpg" data-autourl="http://isure6.stream.qqmusic.qq.com/C200000Iccf527qI3I.m4a?guid=2000001731&amp;vkey=1D73EA5C3739D37172A954289EC42D269F9748E2638A6FC1D23207C4982D3E04EDDC31B36BA9D744ABBCF176B041D6262D50BD108562ECDB&amp;uin=&amp;fromtag=50" data-musicid="283990470" class="music_card_thumb" alt=""></span>
                                </span>
                            </span>
                        </section>
                    </section>
                </foreignObject>
                <!-------------------------------------- SVG引导区域 ------------------------------------>
                <svg xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;">
                    <g style="box-sizing: border-box;">
                        <text font-family="microsoft yahei,sans-serif;" font-size="18" font-weight="bold" y="65" x="170" fill="#FE2C55" style="box-sizing: border-box;">●
                            <animate attributeName="opacity" values="0;1;0" begin="0s" dur="1.5s" repeatCount="indefinite"></animate>
                        </text>
                        <text font-family="microsoft yahei,sans-serif;" font-size="16" font-weight="bold" y="85" x="119" fill="#FE2C55" style="box-sizing: border-box;">点击欣赏德化瓷
                            <animate attributeName="opacity" values="0;1;0" begin="0s" dur="1.5s" repeatCount="indefinite"></animate>
                        </text>
                    </g>
                </svg>
                <!-------------------------------------- SVG动画区域 ------------------------------------>
                <animate attributeName="opacity" begin="touchstart" restart="never" dur="0.1s" keyTimes="0;0.0001;1" values="1;1;0" fill="freeze"></animate>
                <!-- 【修改】values的值 -->
                <animate attributeName="width" fill="freeze" restart="never" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0;0.002;1" values="100%;3561.9%;3561.9%" dur="8000s" begin="touchstart"></animate>
                <set attributeName="visibility" from="visible" to="hidden" begin="touchstart+1s" restart="never"></set>
            </svg>
        </section>
    </section>
</section>

模板应用

回到顶部