随机关键帧位置每次迭代以创建下降 "Matrix Code"

Question

我正在尝试制作一个 HTML 网页，其中包含动画 CSS 类在许多独立的 DIV 上移动到它们自己随机生成的位置。我有 20 个元素，其中随机生成的字符从页面顶部落下，并在它们沿 y 轴移动时消散（如 Matrix 代码）。

编辑： JsFiddle Demo 记住范围很广，所以有时这组字符会生成在右边很远的地方（在小视图之外 window )

在顶部生成随机字符 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 共 20 个 div

<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，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/

随机关键帧位置每次迭代以创建下降 "Matrix Code"

Random Keyframe Positions Every Iteration to Create Falling "Matrix Code"

javascript

css

jquery

keyframe

css-animations