Random Keyframe Positions Every Iteration to Create Falling “Matrix Code”

问题

I'm attempting to make an HTML web page with animated CSS classes on many independent DIVs moving to their own randomly generated positions. I have 20 elements with randomly generated characters falling from the top of the page and dissipating as they move along their y-axis (like the Matrix code).

EDIT: JsFiddle Demo Remember the range is wide, so sometimes the group of characters generate far off to the right (outside the small viewing window)

Generating random char in top 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>

HTML of 20 divs

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

JavaScript: Here I've randomly generated characters (successfully) but only 1 random position. All the elements start in the same position instead of starting from their own spots.

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

How do I properly iterate through the DIVs' styles?

回答1:

Hi I just made this fiddle, Fiddle, I'm not sure that's what you wanted but I get a result that you can easily edit =)

Here is the main function :

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

回答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/

来源：https://stackoverflow.com/questions/33372533/random-keyframe-positions-every-iteration-to-create-falling-matrix-code