黑客帝国文字瀑布流特效-html代码-BFW代码库

黑客帝国文字瀑布流特效

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Matrix digital rain (animated version)</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
        }
        main {
            display: flex;
        }
        p {
            line-height: 1;
        }
        span {
            display: block;
            width: 2vmax;
            height: 2vmax;
            font-size: 2vmax;
            color: #9bff9b11;
            text-align: center;
            font-family: "Helvetica Neue", Helvetica, sans-serif;
        }
    </style>

</head>
<body translate="no">
    <main></main>

    <script>
        function r(from, to) {
            return ~~(Math.random() * (to - from + 1) + from);
        }
        function pick() {
            return arguments[r(0, arguments.length - 1)];
        }
        function getChar() {
            return String.fromCharCode(pick(
                r(0x3041, 0x30ff),
                r(0x2000, 0x206f),
                r(0x0020, 0x003f)));

        }
        function loop(fn, delay) {
            let stamp = Date.now();
            function _loop() {
                if (Date.now() - stamp >= delay) {
                    fn(); stamp = Date.now();
                }
                requestAnimationFrame(_loop);
            }
            requestAnimationFrame(_loop);
        }
        class Char {
            constructor() {
                this.element = document.createElement('span');
                this.mutate();
            }
            mutate() {
                this.element.textContent = getChar();
            }}

        class Trail {
            constructor(list = [], options) {
                this.list = list;
                this.options = Object.assign(
                    {
                        size: 10, offset: 0
                    }, options);

                this.body = [];
                this.move();
            }
            traverse(fn) {
                this.body.forEach((n, i) => {
                    let last = i == this.body.length - 1;
                    if (n) fn(n, i, last);
                });
            }
            move() {
      .........完整代码请登录后点击上方下载按钮下载查看