Question

我正在尝试制作一段代码中向下爬行的代码的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/

无限文本爬行效果

0 个答案: