本文共 6.6k 字，预计阅读时间 40 分钟。
昨天在学院的迎新晚会作为墙君一边管理审核一边xss某个辣鸡微信墙，真是愉快。微信墙上到处是美丽的style。
然而最气的，是墙君小姐姐自己写的滚动字幕没有成功。看了一个成功了的消息代码，感觉和我写的标签没啥区别啊，为啥我就不行呢。
别说了，“=”写成“:”，都是泪 ╮(╯▽╰)╭
在此po一下两种不同的不用JS的滚动字幕方法。
0x00 marquee实现
marquee，一个W3School中已经找不到的标签，据说在HTML标准中已经废弃。但是marquee是早期IE就有了的，大部分浏览器对此支持较好，所以是玩xss的首选（大雾 常用属性：
1
2
| style="padding-left: 30px;">
behavior, direction, play-count, speed, bgcolor, style
|
常用值：
1
2
3
| style="padding-left: 30px;">
behavior = { scroll(滚动), slide(滑动), alternate(反射) }
direction = { left, right, up, down }
|
别的值就是字面意思
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <span class="p"><</span><span class="nt">div</span> <span class="na">align</span><span class="o">=</span><span class="s">center</span><span class="p">></span>
<span class="p"><</span><span class="nt">marquee</span> <span class="na">direction</span><span class="o">=</span><span class="s">"down"</span> <span class="na">width</span><span class="o">=</span><span class="s">"400"</span> <span class="na">height</span><span class="o">=</span><span class="s">"400"</span> <span class="na">behavior</span><span class="o">=</span><span class="s">"alternate"</span> <span class="na">style</span><span class="o">=</span><span class="s">"border:solid"</span> <span class="na">bgcolor</span><span class="o">=</span><span class="s">"000000"</span><span class="p">></span>
<span class="p"><</span><span class="nt">marquee</span> <span class="na">behavior</span><span class="o">=</span><span class="s">"alternate"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">'font-size:5rem;color:yellow'</span><span class="p">></span>
TEST MESSAGE 1
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">marquee</span><span class="p">></span>
<span class="p"><</span><span class="nt">marquee</span> <span class="na">behavior</span><span class="o">=</span><span class="s">"alternate"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">'font-size:5rem;color:yellow'</span><span class="p">></span>
TEST MESSAGE 2
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">marquee</span><span class="p">></span>
<span class="p"><</span><span class="nt">marquee</span> <span class="na">behavior</span><span class="o">=</span><span class="s">"alternate"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">'font-size:5rem;color:yellow'</span><span class="p">></span>
TEST MESSAGE 3
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">marquee</span><span class="p">></span>
<span class="p"></</span><span class="nt">marquee</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
效果：
0x01 SVG实现
SVG，来自W3C推荐标准，是一种特殊元素。利用animate可以使图形根据时间移动。
大概看代码比较好懂。
微信的原生浏览器支持，公众号里可以做出这样的弹幕效果。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <span class="p"><</span><span class="nt">svg</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> width:100%;</span>
<span class="s"> height:20em;</span>
<span class="s"> background:rgb(255,255,255);</span>
<span class="s"> box-sizing:border-box"</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"40"</span> <span class="na">x</span><span class="o">=</span><span class="s">"610.909"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(235,166,36)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"3s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"11s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"55"</span> <span class="na">x</span><span class="o">=</span><span class="s">"352"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(223,34,28)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1.2em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"1s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"9s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"85"</span> <span class="na">x</span><span class="o">=</span><span class="s">"526.667"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(40,216,8)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"2s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"10s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"115"</span> <span class="na">x</span><span class="o">=</span><span class="s">"601.905"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(33,25,23)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1.2em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"4s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"12s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"170"</span> <span class="na">x</span><span class="o">=</span><span class="s">"601.905"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(70,118,217)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"5s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"13s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"220"</span> <span class="na">x</span><span class="o">=</span><span class="s">"487.619"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(255,92,139)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"2s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"10s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"250"</span> <span class="na">x</span><span class="o">=</span><span class="s">"547.879"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(7,140,59)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1.2em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"3s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"11s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"><</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">"230"</span> <span class="na">x</span><span class="o">=</span><span class="s">"568.889"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"rgb(65,105,225)"</span> <span class="na">style</span><span class="o">=</span><span class="s">"</span>
<span class="s"> font-size:1.1em"</span><span class="p">></span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p"><</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">"x"</span> <span class="na">from</span><span class="o">=</span><span class="s">"1200"</span> <span class="na">to</span><span class="o">=</span><span class="s">"-800"</span> <span class="na">begin</span><span class="o">=</span><span class="s">"4s"</span> <span class="na">dur</span><span class="o">=</span><span class="s">"12s"</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">"indefinite"</span><span class="p">></</span><span class="nt">animate</span><span class="p">></</span><span class="nt">text</span><span class="p">></span>
<span class="p"></</span><span class="nt">svg</span><span class="p">></span>
|
效果：