我正在尝试制作一段代码中向下爬行的代码的CSS动画,我希望此文本无限爬行,但文本将直接跳回到顶部。
我想创建一个“矩阵”效果,文本无限地在同一个框中抓取,看起来文本正好放在自己的前面。
这是我正在使用的框的当前代码。
.text-box{
width:200px;
height:100px;
overflow:hidden;
position:relative;
padding:10px;
color: #FF4D4D;
font: normal 8px Lucida Console;
animation:textcrawl 20s linear infinite;
-webkit-animation:textcrawl 20s linear infinite;
}
@keyframes textcrawl
{
from {top:0px;}
to {top:-300px;}
}
@-webkit-keyframes textcrawl
{
from {top:0px;}
to {top:-300px;}
}
我基本上在寻找这种效果:http://fc08.deviantart.net/fs71/f/2013/089/3/8/tileable_matrix_code_by_daschinia-d5zrwux.gif
(对不起蹩脚的例子,我不打算使用矩阵代码lol) 有没有人有任何想法?
JSFiddle:http://jsfiddle.net/AKwLu/