Question

我正在尝试在许多独立的DIV上创建一个带有动画CSS类的HTML网页，这些DIV会移动到他们自己随机生成的位置。我有20个元素，随机生成的字符从页面顶部落下，随着它们沿着y轴移动而消散（就像Matrix代码一样）。

编辑： JsFiddle Demo请记住范围很宽，因此有时字符组会向右生成（在小视图窗口之外）

在顶级JavaScript中生成随机字符

<script type="text/javascript">
    $(document).ready(function() {

    });

    function generateChar()
    {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789«‘¥~‹÷´`≠¡ˆ()][¶#@…•–!£$%&/?^*é§°ç_:è+òàù,.-";
        text = possible.charAt(Math.floor(Math.random() * possible.length));
        return text; 
    }

</script>

20个div的HTML

<div id="m1 " class="timeSpan movement"></div>
...
<div id="m20" class="timeSpan movement"></div>

JavaScript：这里我随机生成了字符（成功），但只有1个随机位置。所有元素都从相同的位置开始，而不是从他们自己的位置开始。

<script type="text/javascript">

    document.getElementById("m1 ").innerHTML = generateChar();
    ...
    document.getElementById("m20").innerHTML = generateChar();


    var divs = document.getElementsByTagName("div");

    for(var i = 0; i < divs.length; i++){

        var xRandom = Math.round(Math.random() * 2000); 
        var yBegRan = Math.round(Math.random() * 150); 
        var yEndRan = Math.round(Math.random() * (2000 - 650) + 650);
        var secRan  = Math.round(Math.random() * (20));  

        var style = document.documentElement.appendChild(document.createElement("style")),
        rule = " moveMinus {\
            0%   {\
                opacity: 1;\
            }\
            100%   {\
                opacity: 0; \
            }\
            from {\
                top: " + yBegRan + "px; left: " + xRandom + "px;\
            }\
            to {\
                top: " + yEndRan + "px; left: " + xRandom + "px;\
            }\
        }";

        if (CSSRule.KEYFRAMES_RULE) {
            style.sheet.insertRule("@keyframes" + rule, 0);
        } else if (CSSRule.WEBKIT_KEYFRAMES_RULE) {
            style.sheet.insertRule("@-webkit-keyframes" + rule, 0);
        }

        divs[i].innerHTML = makeid(); 
    }
</script>

CSS

.body-m{
  background-color: black;
  overflow: hidden;
}

.movement{
  position: absolute;
  font-size: 20px; 
  color: limegreen;
  background-color: transparent;
  overflow: hidden; 
}

@keyframes moveMinus {
  from { top: 0px; left: 21px; }
  to   { top: 600px; left: 21px; }
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.timeSpan{
  animation: moveMinus 7s infinite;
}

如何正确迭代DIV的样式？

Answer 1

嗨，我刚刚做了这个小提琴，Fiddle，我不确定这是你想要的，但我得到一个你可以轻松编辑的结果=）

这是主要功能：

function setDiv(_div){
        var xRandom = Math.round(Math.random() * 2000); 
        var yBegRan = Math.round(Math.random() * 600); 
        var yEndRan = Math.round(Math.random() * (2000 - 650) + 650);
        var secRan  = Math.round(Math.random() * (20)) + 10;  

        _div.style.opacity = 1;
        _div.style.top = yBegRan +"px";
        _div.style.animationDuration = secRan +"s";
        _div.style.left = xRandom + "px";
        _div.innerHTML = generateChar();
    }

Answer 2

    function generateChar() {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789«‘¥~‹÷´`≠¡ˆ()][¶#@…•–!£$%&/?^*é§°ç_:è+òàù,.-";
        text = possible.charAt(Math.floor(Math.random() * possible.length));
        return text;
    }

    var len = 500;
    var style = document.createElement("style");
    document.body.appendChild(style);

    for (var i = 0; i < len; i++) {

        var xRandom = Math.round(Math.random() * 2000);
        var yBegRan = Math.round(Math.random() * 150);
        var yEndRan = Math.round(Math.random() * (2000 - 650) + 650);
        var secRan = Math.round(Math.random() * (20));

        var rule = " moveMinus" + i +" {" 
        + "0%{opacity: 1;top:" 
        + yBegRan + "px; left:" 
        + xRandom + "px;"
        + "}" 
        + "100% {" 
        + "opacity: 0;top:"
        + yEndRan + "px; left:" 
        + xRandom + "px;" 
        + "}}";

        var div = document.createElement("div");
        div.style.position = "absolute";
        div.style.left = (Math.random() * window.innerWidth) + "px";
        div.className = "timeSpan" + i;
        div.innerHTML = generateChar();

        if (!("webkitAnimation" in document.body.style)) {
            style.textContent += "." + div.className 
            +"{animation:moveMinus"+i+" "+Math.random() * 7
            +"s infinite;}\n" +"@keyframes" + rule;
        } else {

            style.textContent += "." + div.className 
            +"{-webkit-animation:moveMinus"+i+" "+Math.random() * 7
            +"s infinite;}\n" 
            +"@-webkit-keyframes" + rule;
        };

        document.body.appendChild(div)
    }

.body-m {
    background-color: black;
    overflow: hidden;
}
/*Base Class*/
 .movement {
    position: absolute;
    font-size: 20px;
    color: limegreen;
    background-color: transparent;
    overflow: hidden;
}

div {
  color:lime;
}

<body class="body-m"></body>

jsfiddle http://jsfiddle.net/yLzkvb9e/2/

随机关键帧定位每次迭代以创建下降的“矩阵代码”

2 个答案: