jquery - 使用 css 更改文本来更改方形图案？

Question

最近，我正尝试通过更改文本来更改正方形图案，就像 www.tffchallenge.com 中那样，但我无法找到一种方法来做同样的事情。我只能使用 css 制作背景，但没有任何效果。

到目前为止，这是我的代码:

样式:

div {
    background: url("http://i.imgur.com/YE8pcYR.jpg") fixed;
    opacity: 0.1;
    height: 6vw;
    width: 6vw;
    display:inline-block;
    padding:0;
    margin:0;
}
body {
    background: #222;
    line-height:0;
    overflow:hidden;
    padding:0;
    margin:0;
}

javascript:

var fadeintime = 400;
var fadeouttime = 2000;
$(document).ready(function(){
    setInterval(anim, 50);
});
function anim(){
    var rand = Math.floor((Math.random()*$("body").children("div").length));
    var el = $("body").children("div")[rand];
    $(el).animate({opacity: "0.7"}, fadeintime);
    $(el).animate({opacity: "0.1"}, fadeouttime);
}

而 html 是:

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>...

我已经创建了不断变化的方形图案，但我无法在其上创建不断变化的文本，你能告诉我怎么做吗。

Answer 1

这里是开始的地方 - FIDDLE .

我还没有弄清楚字母放置的问题 - 我会继续玩，直到我得到答案。您可以根据需要扩展数组中的字母数。

JS

var fadeintime = 400;
var fadeouttime = 2000;
setInterval(anim, 100);
var letterarray = new Array('A','B','C','D','E','F','G','H','I','J');

function anim(){
    var rand = Math.floor((Math.random()*$("body").children("div").length));
    var randletter = Math.floor(Math.random() * letterarray.length);

    var el = $("body").children("div")[rand];
    $(el).animate({opacity: "0.7"}, fadeintime);
    $(el).animate({opacity: "0.1"}, fadeouttime);
    $(el).html( letterarray[randletter] );
}