Question

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

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

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] );
}

用css改变文本改变方形图案？

1 个答案: