SVG排版模板 | 点击播放GIF与音乐
模板效果
模板代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<title>公众号：懂点君 || 视频号：懂点君 || 微信号：dong_dian_jun</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.rich_media_content {
overflow: hidden;
color: #333;
font-size: 17px;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
text-align: justify;
position: relative;
z-index: 0;
}
.rich_media_content * {
max-width: 100%!important;
box-sizing: border-box!important;
-webkit-box-sizing: border-box!important;
word-wrap: break-word!important;
}
</style>
</head>
<body>
<div class="rich_media_content " id="js_content" style="visibility: visible;">
<section style="overflow: hidden; font-size: 0;">
<!-- 播放gif -->
<svg viewbox="0 0 【这里替换为图片宽度】 【这里替换为图片高度】" style="display: block;max-width: none!important;width: 100%;background-size: 100% auto;background-repeat: no-repeat;background-position: 0 0;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;" preserveAspectRatio="xMidYMin meet" data-author="dong_dian_jun | 懂点君">
<g>
<!-- 首长图片 -->
<g data-text="首张图片">
<foreignObject x="0" y="0" width="【这里替换为图片宽度】" height="【这里替换为图片高度】">
<!-- 【如下图片需要替换，url(图片地址)】 -->
<svg style="display: inline-block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQLBD5vsgIjNQOgNXI7d3doNau4p6g2NccsBfmGInRE5uS8FlMuupvB0MUB32Fx9kF0emhvI8pFuw/0?wx_fmt=jpeg);vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 343 193" x="0" y="0"></svg>
</foreignObject>
</g>
<g opacity="0">
<!-- 放置gif -->
<foreignObject x="2000" y="0" width="【这里替换为图片宽度】" height="【这里替换为图片高度】" data-text="gif图片">
<!-- 【如下图片需要替换，url(图片地址)】 -->
<svg viewBox="0 0 【这里替换为图片宽度】 【这里替换为图片高度】" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqQLBD5vsgIjNQOgNXI7d3doRdhsezBC3Amz2vGtNBgyGoKemicIQy7nd0wu8nFmSZxchuI5AYbBUlQ/0?wx_fmt=gif) center center no-repeat;background-size: 100%;background-attachment: scroll;vertical-align: top;" x="0" y="0"></svg>
</foreignObject>
<!-- 放置音乐 -->
<g style="pointer-events: visiblePainted;" data-text="音乐">
<!-- 音乐代码 -->
<foreignObject x="0" y="0" width="【这里替换为图片宽度】" height="【这里替换为图片高度】">
<section style="transform: rotate(0deg) translate(809px,112px) scale(-6);opacity: 0;">
<!-- 【如下代码需要替换，详见懂点君视频号教程】 -->
<section class="custom_select_card_wrp wx-edui-media-wrp" data-mpa-powered-by="yiban.io"><section class="js_editor_audio audio_iframe js_uneditable custom_select_card" src="/cgi-bin/readtemplate?t=tmpl/audio_tmpl&name=%E7%A7%8B%E5%A4%A9%E7%9A%84%E6%9E%AB%E5%8F%B6&play_length=04:00" isaac2="1" low_size="473.61" source_size="473.6" high_size="1881.56" name="秋天的枫叶" play_length="240000" voice_encode_fileid="MzIzNTIzMTM1Ml8xMDAwMDI0NjE=" data-topic_id="" data-topic_name="" data-pluginname="insertaudio" style="margin-top: 50px;" contenteditable="false">
<section class="appmsg_card_context appmsg_card_active audio_card js_audio_card"><strong class="audio_card_title">秋天的枫叶</strong><span class="weui-flex"><span class="weui-flex__item"><span class="audio_card_opr"><span class="audio_card_progress_wrp"><span class="audio_card_progress"><span class="audio_card_progress_inner"></span></span></span></span><span class="audio_card_tips" aria-labelledby="时长"><em class="audio_card_length_current">00:00</em><em class="audio_card_length_total">04:00</em></span></span><span aria-labelledby="播放开关" class="audio_card_switch"><em class="weui-audio-btn" role="button"></em></span></span><span class="audio_album_null js_no_album">未加入话题</span><span class="audio_album_null js_album_name" style="display: none;"></span><span class="audio_action js_audio_action" style="display: none;"><span class="audio_action_item js_replace_album" style="display: none;"><em class="audio_action_icon_switch"></em>修改话题</span><span class="audio_action_item js_add_album"><em class="audio_action_icon_add"></em>添加话题</span></span></section>
</section></section>
</section>
</foreignObject>
<!-- 隐藏起来 -->
<set attributeName="visibility" from="visible" to="hidden" begin="touchstart+0.3s"></set>
</g>
<!-- 移动gif，目的是触发gif播放 -->
<animateTransform attributeName="transform" type="translate" values="0 0;-2000 0;-2000 0" keyTimes="0;0.00000000001;1" begin="touchstart+0.3s" dur="1000s" restart="never" fill="freeze"></animateTransform>
<!-- 透明度控制播放 -->
<animate attributeName="opacity" values="0;1;1" keyTimes="0;0.0001;1" begin="touchstart+0.3s" dur="10000s" restart="whenNotActive" fill="freeze"></animate>
</g>
</g>
</svg>
<!-- 覆盖一层path，防止用户误碰 -->
<section style="height: 0px;line-height: 0;pointer-events: none;transform: rotate(180deg);weixin: dong_dian_jun;" data-author="dong_dian_jun | 懂点君">
<svg style="display: block;width: 100%;transform: rotate(180deg);pointer-events: none;" viewBox="0 0 【这里替换为图片宽度】 【这里替换为图片高度】">
<!-- 【如下path用ai重新绘制】 -->
<path xmlns="http://www.w3.org/2000/svg" d="M343,0H0V193H343ZM109,124V50H240v74Z" opacity="0" style="pointer-events: painted;fill:#000;weixin: dong_dian_jun;opacity: 0;"/>
</svg>
</section>
</section>
</div>
</body>
</html>
强力驱动