关于svg动画:SVG排版公众号文章『点击同时显示图片与音乐播放』模板代码

42次阅读

共计 3327 个字符，预计需要花费 9 分钟才能阅读完成。

点击查看成果

<section style="overflow: hidden;width: 100%;height: 100%;visibility: visible;" data-share="公众号：懂点君">
    <!-- 第二张图片 -->
    <svg width="100%" height="100%" style="visibility: visible;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSiak2l2UzsVHxhomBS2bjpEPTxOt0xNE1dSzhJOrqnpI7WziaxSSxAKHiccAY7GHGIkSAYad1xlaibdw/0?wx_fmt=gif;)
    no-repeat top center;background-size: 100%;background-position: 0 0;"viewBox="0 0 1024 2225">
        <g data-share="公众号：懂点君">
            <!-- 第一张图片 -->
            <foreignObject width="100%" height="100%" x="0" y="0">
                <svg style="visibility: visible;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSiak2l2UzsVHxhomBS2bjpEgkFeFiajNpSaqyAJd2gaUD6ibCgtPjv2TAfcyeibNR5VzibbyCDdhiagjnw/0?wx_fmt=jpeg)
                no-repeat top center;background-size: 100%;pointer-events: none;"viewBox="0 0 1024 2225"xmlns="http://www.w3.org/2000/svg">
                </svg>
            </foreignObject>
            <!-- 音乐区域 -->
            <foreignObject width="100%" height="100%" x="0" y="0">
                <section style="overflow: hidden;pointer-events: painted;opacity: 0;transform: scale(90) translate(-462px, 19px);">
                    <!-- 须要替换如下音乐代码（具体步骤请看视频教程）-->
                        <section><qqmusic class="js_editor_qqmusic js_uneditable" musicid="213874992" mid="001Mi6C00aNunH" albumurl="https://y.gtimg.cn/music/photo_new/T002R68x68M000003x0x0W02puoP.jpg" audiourl="http://isure6.stream.qqmusic.qq.com/C200004VUx6R2b7AMH.m4a?guid=2000001731&amp;vkey=F5565B900A3BC11A2DE3C4CF1499B08A96E19BA02F27BDA9B18FAA349BE61146EB2B66D5545097C71376BE16E58F8721D427D1351DD9CFBA&amp;uin=&amp;fromtag=50" music_name="奔跑" singer="羽泉 &nbsp;-&nbsp; 嗨，唱起来 &nbsp; 第 2 期" play_length="164" src="/mp/readtemplate?t=app_editor/music&amp;singer=%E7%BE%BD%E6%B3%89%20-%20%E5%97%A8%EF%BC%8C%E5%94%B1%E8%B5%B7%E6%9D%A5%20%E7%AC%AC2%E6%9C%9F&amp;music_name=%E5%A5%94%E8%B7%91&amp;albumurl=https%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R68x68M000003x0x0W02puoP.jpg&amp;musictype=1" musictype="1" otherid="001Mi6C00aNunH" albumid="003x0x0W02puoP" jumpurlkey=""data-pluginname="insertaudio"></qqmusic><span id="qqmusic_main_213874992_2"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_213874992_2"class="music_card_bd">                 <span class="music_card_title"> 奔跑 </span>                 <span class="music_card_desc"> 羽泉 &nbsp;-&nbsp; 嗨，唱起来 &nbsp; 第 2 期 </span>                 <span class="music_card_source ">                   ![](https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_source531a3f.svg)</span>             </a>             <span id="qqmusic_play_213874992_2"class="music_card_ft">                 <i class="weui-play-btn"></i>                 <!--                 ![](//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_default.2x531a3f.png)                 -->                 ![](https://y.gtimg.cn/music/photo_new/T002R90x90M000003x0x0W02puoP.jpg)             </span>     </span> </span></section>
                </section>
            </foreignObject>
            <!-- 暗藏第一张图片的动画 -->
            <animate attributeName="opacity" begin="touchstart+0.3s" dur="380s" keyTimes="0;0.0009;1" values="1;0;0" fill="freeze" restart="never"></animate>
        </g>
    </svg>
</section>
<!-- 管制点击区域大小 -->
<section style="height: 0px;margin-top: -2px;line-height: 0;font-size:0;pointer-events: none;transform: rotate(180deg);" data-share="公众号：懂点君">
    <svg style="transform: rotate(180deg);" viewBox="85 0 830 1905" xmlns="http://www.w3.org/2000/svg">
        <path fill="#000" opacity="0" style="pointer-events: visible;" d="M-0,0v1890h1100V0.5H-0.5z M600,1600H374v-409h252V1591z"></path>
    </svg>
</section>

正文完