公众号SVG图文『动画展开长图与音乐播放』模板代码
模板效果
模板代码
<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&vkey=1D73EA5C3739D37172A954289EC42D269F9748E2638A6FC1D23207C4982D3E04EDDC31B36BA9D744ABBCF176B041D6262D50BD108562ECDB&uin=&fromtag=50" music_name="德化美" singer="曾晓忠 - 闽南小中" play_length="224" src="/cgi-bin/readtemplate?t=tmpl/qqmusic_tmpl&singer=%E6%9B%BE%E6%99%93%E5%BF%A0%20-%20%E9%97%BD%E5%8D%97%E5%B0%8F%E4%B8%AD&music_name=%E5%BE%B7%E5%8C%96%E7%BE%8E&albumurl=https%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R68x68M000003Pn1X03X29HF.jpg&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">曾晓忠 - 闽南小中</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&vkey=1D73EA5C3739D37172A954289EC42D269F9748E2638A6FC1D23207C4982D3E04EDDC31B36BA9D744ABBCF176B041D6262D50BD108562ECDB&uin=&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>
模板应用
强力驱动