html - Matrix 风格的二进制代码，好还是不好？

Question

我需要一些与 IT 有关的类似图像的插图，找到了黑客帝国 Angular 色的图像，并认为我可以制作该二进制代码并让它像电影中那样掉落。那么，我应该使用示例中的代码(带有讨厌的 MARQUEE 标签(我自己通常不是粉丝))、动画 GIF 还是有更好的解决方案而不是根本不这样做？

使用 MARQUEE 时是否存在任何 SEO 问题(除了它可能对网站访问者行为产生的影响)？

http://jsfiddle.net/fruLg/

CSS

#marq{ background-color: #000;
 height: auto;
 width: 27em;
}
#marqt{ font-family: Arial, Helvetica, sans-serif;
 font-size: 0.7em;
 color: #31B404;
}
#marqt td{ width: 0.7em;
}

HTML

<div id="marq">
<table id="marqt">
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
</table>
</div>

Answer 1

您可以简单地使用带有关键帧的 CSS3 转换来为单个 <span> 制作动画。带有所需文本的元素。这将是现代的方式。否则，动画图像也应该不错。

<marquee>永远不应该使用，因为它不是标准。

编辑:参见 http://jsfiddle.net/yEsw6/不完美，但这是开始。 :)