SVG排版模板 | 点击播放GIF与音乐
发布于 2021-10-13 00:34
课程推荐
《SVG征程》| (一)开发工具之Sublime Text
《SVG征程》| (二)开发工具之Chrome浏览器
《SVG征程》| (三)开发工具之TinyPNG图片压缩
《SVG征程》| (4)快速开发自己的第一个SVG
《SVG征程》| (5)两种无缝图以及它们的区别
《SVG征程》| (6)深色模式下无缝图的适配
《SVG征程》| (7)伸缩展开无缝长图
模板代码
<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"><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%;box-sizing: border-box;-webkit-box-sizing: border-box;word-wrap: break-word;}</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></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>
懂点君 ，
《解答疑问》播放GIF与音乐，如何替换音乐代码？一分钟让你学会如何替换音乐代码#svg#播放gif#播放音乐
懂点君
一枚程序员，长期致力于各种小知识的分享。 从此让你多懂点，少吃亏！ 定制请：野生符号
本文来自网络或网友投稿，如有侵犯您的权益，请发邮件至：aisoutu@outlook.com 我们将第一时间删除。
相关素材