用html实现文字雨

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字雨</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>
  <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() {
        this.body = [];
        let { offset, size } = this.options;
        for (let i = 0; i < size; ++i) {
          let item = this.list[offset + i - size + 1];
          this.body.push(item);
        }
        this.options.offset =
          (offset + 1) % (this.list.length + size - 1);
      }
    }
    class Rain {
      constructor({ target, row }) {
        this.element = document.createElement('p');
        this.build(row);
        if (target) {
          target.appendChild(this.element);
        }
        this.drop();
      }
      build(row = 20) {
        let root = document.createDocumentFragment();
        let chars = [];
        for (let i = 0; i < row; ++i) {
          let c = new Char();
          root.appendChild(c.element);
          chars.push(c);
          if (Math.random() < .5) {
            loop(() => c.mutate(), r(1e3, 5e3));
          }
        }
        this.trail = new Trail(chars, {
          size: r(10, 30), offset: r(0, 100)
        });
        this.element.appendChild(root);
      }
      drop() {
        let trail = this.trail;
        let len = trail.body.length;
        let delay = r(10, 100);
        loop(() => {
          trail.move();
          trail.traverse((c, i, last) => {
            c.element.style = `
        color: hsl(136, 100%, ${85 / len * (i + 1)}%)
      `;
            if (last) {
              c.mutate();
              c.element.style = `
          color: hsl(136, 100%, 85%);
          text-shadow:
            0 0 .5em #fff,
            0 0 .5em currentColor;
        `;
            }
          });
        }, delay);
      }
    }

    const main = document.querySelector('main');
    for (let i = 0; i < 50; ++i) {
      new Rain({ target: main, row: 50 });
    }
  </script>
</body>
</html>
相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站