无限文本爬行效果

时间:2014-04-08 11:53:36

标签: css css-animations

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

没有答案