2016年3月微信公众号过火的莫过于图片弹幕效果,也许有小伙伴好奇这些怎么做的吧。其实一点都不复杂,弹幕就是个HTML代码,换上文字就是你的内容。直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>微信弹幕</title>
</head>
<body>
<section id="wrap_node" style="border: dashed 1px #797979; padding: 5px;">
<section label="Copyright © 2016 playhudong All Rights Reserved." style="
border:none;
border-style:none;
margin: 1em auto;
width:100%;
" id="shifu_bar_001" donone="shifuMouseDownStyle('shifu_bar_001')">
<svg class="xhr" xmlns="http://www.w3.org/2000/svg" style="
width:100%;
height:20em;
background:rgb(255,255,255);
box-sizing:border-box">
<text y="40" x="-92.6304" fill="rgb(235,166,36)" style="
font-size:1em;
box-sizing:border-box">
caobs博主好帅啊
<animate attributename="x" from="800" to="-400" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>
</text>
<text y="90" x="658.107" fill="rgb(223,34,28)" style="
font-size:1.2em;
box-sizing:border-box">
快打开 www.csdn.net!!! 你懂的
<animate attributename="x" from="800" to="-400" begin="1s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>
</text>
<text y="120" x="181.756" fill="rgb(40,216,8)" style="
font-size:1em;
box-sizing:border-box">
我要上电视,终于上电视了,o(≧v≦)o~~好棒
<animate attributename="x" from="800" to="-600" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>
</text>
<text y="160" x="-669.191" fill="rgb(33,25,23)" style="
font-size:0.875em;
box-sizing:border-box">
csdn,这个网站也很不错,里面好多干货
<animate attributename="x" from="800" to="-800" begin="3s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>
</text>
<text y="210" x="436.292" fill="rgb(70,118,217)" style="
font-size:1em;
box-sizing:border-box">
听说明天要下雨
<animate attributename="x" from="800" to="-800" begin="5s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>
</text>
<text y="240" x="93.4349" fill="rgb(255,92,139)" style="
font-size:0.7em;
box-sizing:border-box">
曹布斯,ECUT的大学狗
<animate attributename="x" from="800" to="-800" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>
</text>
<text y="280" x="-390.174" fill="rgb(7,140,59)" style="
font-size:1.2em;
box-sizing:border-box">
欢迎骚扰曹布斯:微信号:Cao-Hongqing
<animate attributename="x" from="800" to="-800" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>
</text>
</svg>
</section>
</section>
<p class="shifubrush">
<br/>
</p>
</body>
</html>