弹幕图片汹涌而至！微信进阶玩法 v2.0

此前IT之家为大家介绍过玩坏微信朋友圈的一些系列有趣玩法，其实微信中有趣的玩法还有很多，今天IT之家就再为大家介绍一种更加涨粉的技能：发送弹幕图片！

看惯了网络视频节目的用户是不是觉的弹幕是一种十分有趣的东西？其实在微信中也能够实现这种高大上的效果。不过这需要在微信HTML代码中引入svg标签，这样能够在编辑出来的图文中做出动画、弹幕这样有意思的内容了。我们不妨将微信这种进阶玩法称为2.0版本，技能强化升级，吸粉啥的简直不在话下~

下面，就让我们一步一步实现这一功能吧，首先从文字效果开始：

1、弹幕效果

这个比较简单，只需将下方代码复制到微信HTML编辑框中，用户可将代码中汉字部分替换为其他文字：

<svg width="100%" height="25" xmlns="http://www.w3.org/2000/svg">

<g>

<text font-family="microsoft yahei,sans-serif" font-size="20" y="20" x="100%" fill="#898989">

IT之家

<animate attributename="x" from="100%" to="-200" begin="0s" dur="3s" repeatcount="indefinite"></animate>

</text>

</g>

</svg>

这样就能出现如下效果：

2、改变透明度

要实现这一功能需要用到一下代码：

<center>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<text x="35%" y="20" fill="#898989" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">

IT之家<animate attributename="opacity" from="1" to="0" begin="0s" dur="1.2s" repeatcount="indefinite"></animate>

</text>

<text x="35%" y="40" fill="#767676" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">

IT之家<animate attributename="opacity" from="1" to="0" begin="0.2s" dur="1.2s" repeatcount="indefinite"></animate>

</text>

<text x="35%" y="60" fill="#646464" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">

IT之家<animate attributename="opacity" from="1" to="0" begin="0.4s" dur="1.2s" repeatcount="indefinite"></animate>

</text>

<text x="35%" y="80" fill="#333333" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">

IT之家<animate attributename="opacity" from="1" to="0" begin="0.6s" dur="1.2s" repeatcount="indefinite"></animate>

</text>

<text x="35%" y="100" fill="#000000" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">

IT之家<animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1.2s" repeatcount="indefinite"></animate>

</text>

</svg>

</center>

可实现的效果如下：

3、结合GIF实现图片弹幕效果：

在实现上述文字效果的基础上，结合GIF图片就能够实现图片弹幕效果了，这在微信中显然具有较大杀伤力，那么怎么做呢？

① 首先，我们可以选取一张gif图片上传到微博

② 点击查看大图 在新标签页中打开图片，获得该图片的网页链接

③ 将如下代码复制到微信HTML编辑框中，代码中的图片链接可使用刚才获得的图片链接，汉字部分用户可自行替换成其他：

<p>

<img src="http://d.ikuyy.com/news/b96366fbjw1eyyee3vv2tg20dw07t7h7.gif"/>

</p>

<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">

IT之家

<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="109.055" fill="#ffffff" font-weight="bold">

IT之家

<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="109.055" fill="#ffffff" font-weight="bold">

IT之家

<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="109.055" fill="#ffffff" font-weight="bold">

IT之家

<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="283.601" fill="#ffffff" font-weight="bold">

IT之家

<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">

IT之家

<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">

IT之家

<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">

IT之家

<animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1s" repeatcount="indefinite"></animate>

</text>

</svg>

这样，就可以实现如下效果：