javascript - 使用 CSS 制作二进制数动画

Question

是否可以使用 CSS(和/或 HTML5/JQuery/Javascript)实现以下动画(http://www.motionbackgroundsforfree.com/technology-free-backgrounds/free-technology-background-binary-horizon/)？

想要全屏背景，二进制文件在右侧作为循环流出。

谢谢。

Answer 1

这是我做的:

$(document).ready(function() {
  var lines = 10;
  var textLength = 40;

  for (i = 0; i < lines - 1; i++) {
    $(".num").first().clone().insertAfter($(".num").first());
  }


  setInterval(function() {
    $(".num").each(function() {
      if ($(this).text().length < textLength) {
        $(this).text(($(this).text() + Math.round(Math.random())));
      } else {
        $(this).text(Math.round(Math.random()) + $(this).text().substring(0, $(this).text().length - 1))
      }
    });

  }, 75);

});

Here is the JSFiddle demo

你可以进一步调整它:)