评论

资源 | 公众号SVG“三连击”模板代码(三)

资源 | 公众号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”菜单,最后把模板代码复制黏贴进去,这样就完成了模板代码的应用了。


最后一次编辑于  09-18  
点赞 1
收藏
评论
登录 后发表内容