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

Question

我正在尝试制作一个 HTML 网页，在许多独立的 DIV 上移动到它们自己随机生成的位置上的动画 CSS 类。我有 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 ，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();
    }