模板效果

點(diǎn)擊查看效果

模板代碼

? ? <section style="overflow: hidden;width: 100%;height: 100%;visibility: visible;" data-share="公眾號(hào)：懂點(diǎn)君">

? ? ? ? <!-- 第二張圖片 -->

? ? ? ? <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="公眾號(hào)：懂點(diǎn)君">

? ? ? ? ? ? ? ? <!-- 第一張圖片 -->

? ? ? ? ? ? ? ? <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>

? ? ? ? ? ? ? ? <!-- 音樂區(qū)域 -->

? ? ? ? ? ? ? ? <foreignObject width="100%" height="100%" x="0" y="0">

? ? ? ? ? ? ? ? ? ? <section style="overflow: hidden;pointer-events: painted;opacity: 0;transform: scale(90) translate(-462px, 19px);">

? ? ? ? ? ? ? ? ? ? ? ? <!-- 需要替換如下音樂代碼（具體步驟請(qǐng)看視頻教程） -->

? ? ? ? ? ? ? ? ? ? ? ? ? ? <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;嗨，唱起來(lái)&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;">? ? ?當(dāng)前瀏覽器不支持播放音樂或語(yǔ)音，請(qǐng)?jiān)谖⑿呕蚱渌麨g覽器中播放? ? </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;嗨，唱起來(lái)&nbsp;第2期</span>? ? ? ? ? ? ? ? ?<span class="music_card_source ">? ? ? ? ? ? ? ? ? ?<img src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_source531a3f.svg" alt=""></span>? ? ? ? ? ? ?</a>? ? ? ? ? ? ?<span id="qqmusic_play_213874992_2" class="music_card_ft">? ? ? ? ? ? ? ? ?<i class="weui-play-btn"></i>? ? ? ? ? ? ? ? ?<!--? ? ? ? ? ? ? ? ?<img src="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_default.2x531a3f.png" alt="" class="pic_qqmusic_default">? ? ? ? ? ? ? ? ?-->? ? ? ? ? ? ? ? ?<img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003x0x0W02puoP.jpg" data-autourl="http://isure6.stream.qqmusic.qq.com/C200004VUx6R2b7AMH.m4a?guid=2000001731&amp;vkey=F5565B900A3BC11A2DE3C4CF1499B08A96E19BA02F27BDA9B18FAA349BE61146EB2B66D5545097C71376BE16E58F8721D427D1351DD9CFBA&amp;uin=&amp;fromtag=50" data-musicid="213874992" class="music_card_thumb" alt="">? ? ? ? ? ? ?</span>? ? ?</span> </span></section>

? ? ? ? ? ? ? ? ? ? </section>

? ? ? ? ? ? ? ? </foreignObject>

? ? ? ? ? ? ? ? <!-- 隱藏第一張圖片的動(dòng)畫 -->

? ? ? ? ? ? ? ? <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>

? ? <!-- 控制點(diǎn)擊區(qū)域大小 -->

? ? <section style="height: 0px;margin-top: -2px;line-height: 0;font-size:0;pointer-events: none;transform: rotate(180deg);" data-share="公眾號(hào)：懂點(diǎn)君">

? ? ? ? <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>