svg 动画_公众号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 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>                                <animate attributeName="opacity" begin="touchstart" restart="never" dur="0.1s" keyTimes="0;0.0001;1" values="1;1;0" fill="freeze">animate>                                <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>

模板应用