资源 | 公众号SVG“三连击”模板代码（三）
模板效果
模板代码
<!-- 修改宽度width: 建议不要太大 -->
<section style="overflow: hidden;width: 345px; margin: 0px auto;font-size: 0px;line-height: 0;background: #eee;">
<!-- 内容部分 -->
<section style="line-height: 0;height:0;margin-left: auto;margin-right: auto;text-align: center;">
<!-- 第一个图片 -->
<section style="width: 345px;height: 1200px;background-position: top center;background-repeat: no-repeat;background-size:345px 1200px;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqR78tNiaD5QYThHRQohTgYgDjKFJTLMYbyQLavmzndUyk9SFL9XhLxh0HtyW8lL6D7rdYw5fWVdh1w/0?wx_fmt=png);"></section>
<!-- 第二个图片 -->
<section style="width: 345px;height: 1200px;background-position: top center;background-repeat: no-repeat;background-size:345px 1200px;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqR78tNiaD5QYThHRQohTgYgDyO3Ex9iavxVCAWo0Rm15VdiaZVpmJYFSZDpjGCYntVVrboNicdohXBUWw/0?wx_fmt=png);"></section>
<!-- 第三个图片 -->
<section style="width: 345px;height: 1200px;background-position: top center;background-repeat: no-repeat;background-size:345px 1200px;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqR78tNiaD5QYThHRQohTgYgDZVLyEkCXMnst4sZ6mR2yM6RI1CHUn9SGIlfSbHol19DQHIczUQIPOQ/0?wx_fmt=png);"></section>
</section>
<!------------------------------ 第一连击 ---------------------------->
<section style="overflow: visible;float: left;width:33.33%;pointer-events: none;line-height: 0;">
<svg style="overflow: visible;display: block;pointer-events: none;max-width: none !important;width: 300%;isolation: isolate;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 345 400" xml:space="preserve">
<!-- 透明度 -->
<animate attributeName="opacity" begin="click" restart="never" dur="900s" keyTimes="0;0.002;1" values="1;0;0" fill="freeze"></animate>
<!-- 撑开宽度和高度 -->
<animate attributeName="width" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0;0.002;1" begin="click+0.5s" dur="900s" fill="freeze" values="300%;900%;900%;"></animate>
<g>
<!-- 透明度 -->
<animate attributeName="opacity" begin="click" restart="never" dur="900s" keyTimes="0;0.0008;1" values="1;0;0" fill="freeze"></animate>
<!-- 图片位移，缩放时从中间缩放（svg的viewBox属性可以实现固定的比例, 然后通过width: 100%或者height: 100%;来选择哪一边当作填充, 另一边则按照比例撑开.） -->
<g transform="translate(173 200)">
<!-- 图形缩放 -->
<animateTransform attributeName="transform" type="scale" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" values="1;18;18" keyTimes="0;0.001;1" dur="1000s" restart="never" fill="freeze" additive="sum" begin="click"></animateTransform>
<g transform="translate(-173 -200)">
<foreignObject x="0" y="0" width="345" height="400">
<svg style="display: inline-block;width: 100%;vertical-align: top;background-position: center center;background-repeat: no-repeat;background-size:345px 400px;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqR78tNiaD5QYThHRQohTgYgDZK8ndED4pQCTNSgLc1AHSAgFoxOmtLwlKAR07mZUygmSiaTBh7SW5aQ/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 345 400"></svg>
</foreignObject>
<g>
<g style="pointer-events:visible;">
<animate attributeName="opacity" begin="click" restart="never" dur="999s" keyTimes="0;0.0001;1" values="1;0;0" fill="freeze"></animate>
<set attributeName="visibility" begin="click+0.1s" dur="0.0001s" from="visible" to="hidden" fill="freeze" repeatCount="1"></set>
<!-- 引导点击 -->
<circle cx="172" opacity="0.7" cy="177" fill="#fff" r="10.5">
<animate attributeName="r" values="10.5;13;10.5" begin="0s" dur="1.2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="172" cy="177" fill="#ff0000" r="6.16"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
</section>
<!------------------------------ 第二连击 ---------------------------->
<section style="overflow: visible;float: left;width:33.33%;pointer-events: none;line-height: 0;">
<svg style="display: block;margin-top: -1px;transform: rotateZ(0deg) scale(1);pointer-events: none;max-width: none !important;width: 300%;overflow: visible;isolation: isolate;" viewBox="0 0 345 400" opacity="0">
<!-- 点击按钮 -->
<g opacity="0">
<animate attributeName="opacity" to="1" begin="click" dur="1ms" fill="freeze" calcMode="discrete"></animate>
<rect width="145" height="60" x="-15" y="1120" fill="#39f" style="pointer-events: visible;" opacity="0">
<set attributeName="visibility" to="hidden" begin="click" dur="1ms" fill="freeze"></set>
</rect>
</g>
<!-- 撑开宽度和高度 -->
<animate attributeName="width" begin="click" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" dur="900s" keyTimes="0;0.002;1" fill="freeze" values="600%;1800%;1800%;"></animate>
</svg>
</section>
<!------------------------------ 第三连击 ---------------------------->
<section style="overflow: visible;float: left;width:33.33%;pointer-events: none;line-height: 0;">
<svg style="display: block;margin-top: -1px;transform: rotateZ(0deg) scale(1);pointer-events: none;max-width: none !important;width: 300%;overflow: visible;isolation: isolate;" viewBox="0 0 345 400" opacity="0">
<!-- 点击按钮 -->
<g opacity="0">
<animate attributeName="opacity" to="1" begin="click" dur="1ms" fill="freeze" calcMode="discrete"></animate>
<rect width="145" height="60" x="-130" y="2320" fill="#39f" style="pointer-events: visible;" opacity="0">
<set attributeName="visibility" to="hidden" begin="click" dur="1ms" fill="freeze"></set>
</rect>
</g>
<!-- 撑开宽度和高度 -->
<animate attributeName="width" begin="click" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" dur="900s" keyTimes="0;0.002;1" fill="freeze" values="900%;2700%;2700%;"></animate>
</svg>
</section>
</section>
模板应用
- 第1步：在公众号后台新建一个图文信息；
- 第2步：修改SVG模板代码，比如图片内容、图片高度等等，根据自己的需求进行修改（有HTML5基础会比较好）；
- 第3步：在图文信息编辑页中，按键盘F12或鼠标右键选择“检查”菜单即可开启浏览器控制台，审查图文编辑器，选中编辑器的body节点，然后鼠标右键选择“Edit as HTML”菜单，最后把模板代码复制黏贴进去，这样就完成了模板代码的应用了。
强力驱动