微信公众号弹幕的HTML5和SVG代码

通过在微信HTML代码中引入svg标签，我们可以使用基于svg的代码原理脱离CSS和JavaScript以及GIF图片制作动画。在图文中可以简单理解成不用绘图工具也能画图做动画，超链接，甚至更多玩法。通过SVG也可以获得极快速的加载速度。下面我总结了图文中可使用的SVG效果及具体应用。

1、弹幕效果

代码：

2、旋转效果

代码：

3、改变透明度效果

代码：

4、超链接弹幕效果

代码：

5、绘图+渐隐 效果

代码：

6、文字沿路径移动效果

代码：

7、进阶玩法：图片背景的弹幕效果

（SVG+HTML+GIF结合运用）

代码：

<img src="http://mmbiz.qpic.cn/mmbiz/9x9BHGwhNttorNw4jDA3EqstTv50RQZSUic0mHk1fNYlHYSsMA4h1DuLwYwia4d3u27Thhpx4EyyAr5mK4QFX1DA/0?wx_fmt=gif"/>
<svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg" style="margin-top: -160px;">
    <text font-family="microsoft yahei,sans-serif" font-size="18" y="20" x="5%" fill="#c00000" font-weight="bold">
      报名H5杀手训练营，系统学习SVG应用         <animate attributename="opacity" from="1" to="0" begin="0.8s" dur="5s" repeatcount="indefinite"></animate>
    </text>
    <text font-family="microsoft yahei,sans-serif" font-size="14" y="20" x="100%" fill="#ffffff" font-weight="bold">
        SVG代码哪里学？        <animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
    </text>
    <text font-family="microsoft yahei,sans-serif" font-size="14" y="34" x="100%" fill="#ffffff" font-weight="bold">
        我好想学SVG！！！        <animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
    </text>
    <text font-family="microsoft yahei,sans-serif" font-size="14" y="49" x="100%" fill="#ffffff" font-weight="bold">
        我好想学SVG！！！        <animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
    </text>
    <text font-family="microsoft yahei,sans-serif" font-size="14" y="28" x="100%" fill="#ffffff" font-weight="bold">
        听说H5杀手训练营可以学SVG        <animate attributename="x" from="800" to="-400" begin="0.8s" dur="5.5s" repeatcount="indefinite"></animate>
    </text>
    <text font-family="microsoft yahei,sans-serif" font-size="14" y="110" x="24%" fill="#ffffff" font-weight="bold">
        听说H5杀手训练营可以学SVG        <animate attributename="opacity" from="1" to="0" begin="1.6s" dur="1s" repeatcount="indefinite"></animate>
    </text>
    <text font-family="microsoft yahei,sans-serif" font-size="14" y="130" x="24%" fill="#ffffff" font-weight="bold">
        听说H5杀手训练营可以学SVG        <animate attributename="opacity" from="1" to="0" begin="1.2s" dur="1s" repeatcount="indefinite"></animate>
    </text>
    <text font-family="microsoft yahei,sans-serif" font-size="14" y="150" x="24%" fill="#ffffff" font-weight="bold">
        听说H5杀手训练营可以学SVG        <animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1s" repeatcount="indefinite"></animate>
    </text>
</svg>

7、一个小结

SVG就像CSS和HTML一样，是一个听起来很高大上，但实际上远没有多么复杂的一个名词。甚至只要你4级通过，几分钟就可以完全理解代码的含义。困难的地方在于怎么样使用SVG更有趣，SVG和CSS到底有多少花样结合玩法？我们抛砖引玉，欢迎你继续钻研。