给大家推荐一个好玩的前端动画，仿siri效果

结构：

css：

html,
body {
  overflow: hidden;padding:0;margin:0;
}

body {
  position: relative;
  background: #000;
  color: #fff;
  font-size: 2rem;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: #fff;
}

#mes1, #mes2 {
  padding: 1.6rem;
  position: absolute;
  opacity: 0;
}

.siri {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

#list {
  padding: 1.6rem;
  max-height: 60%;
  opacity: 0;
  display: none;
  position: absolute;
  overflow: scroll;
}

.slideUp {
  opacity: 1;
  -webkit-animation-name: slideUp;
          animation-name: slideUp;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

ul {
  margin: 1.6rem 0;
}

ul li {
  list-style-type: disc;
  list-style-position: inside;
}

ul li a {
  font-size: 1.2rem;
}

 script.js

class Tool {
  // random number.
  static randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  // random color rgb.
  static randomColorRGB() {
    return (
      "rgb(" +
      this.randomNumber(0, 255) +
      ", " +
      this.randomNumber(0, 255) +
      ", " +
      this.randomNumber(0, 255) +
      ")"
    );
  }
  // random color hsl.
  static randomColorHSL(hue, saturation, lightness) {
    return "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)";
  }
  // gradient color.
  static gradientColor(ctx, cr, cg, cb, ca, x, y, r) {
    const col = cr + "," + cg + "," + cb;
    const g = ctx.createRadialGradient(x, y, 0, x, y, r);
    g.addColorStop(0, "rgba(" + col + ", " + ca * 1 + ")");
    g.addColorStop(0.5, "rgba(" + col + ", " + ca * 0.5 + ")");
    g.addColorStop(1, "rgba(" + col + ", " + ca * 0 + ")");
    return g;
  }
}

/*
  When want to use angle.
*/

class Angle {
  constructor(angle) {
    this.a = angle;
    this.rad = (this.a * Math.PI) / 180;
  }

  incDec(num) {
    this.a += num;
    this.rad = (this.a * Math.PI) / 180;
    return this.rad;
  }
}

/*
  When want to use controller.
*/

class Controller {
  constructor(id) {
    this.id = document.getElementById(id);
  }
  getVal() {
    return this.id.value;
  }
}

/*
  When want to use time.
*/

class Time {
  constructor(time) {
    this.startTime = time;
    this.lastTime;
    this.elapsedTime;
  }

  getElapsedTime() {
    this.lastTime = Date.now();
    this.elapsedTime = (this.startTime - this.lastTime) * -1;
    return this.elapsedTime;
  }
}

/*
  When want to use time.
*/
let canvas;
const simplex = new SimplexNoise();

class Canvas {
  constructor(bool) {
    // create canvas.
    this.canvas = document.createElement("canvas");
    // if on screen.
    if (bool === true) {
      this.canvas.style.display = "block";
      this.canvas.style.top = 0;
      this.canvas.style.left = 0;
      document.getElementsByTagName("body")[0].appendChild(this.canvas);
    }
    this.ctx = this.canvas.getContext("2d");
    this.width = this.canvas.width = window.innerWidth;
    this.height = this.canvas.height = window.innerHeight;
    // mouse infomation.
    this.mouseX = null;
    this.mouseY = null;
    // shape
    this.shapeNum = 3;
    this.shapes = [];
    // time
    this.behavior = 0;
    this.time = new Time(Date.now());
    // glitch
    this.glitch;
    this.glitchSwitch = false;
    // dom
    this.mes1 = document.getElementById("mes1");
    this.mes2 = document.getElementById("mes2");
    this.list = document.getElementById("list");
    this.ul = this.list.lastElementChild;
    this.asks = [
      "I'm sorry, Siri.",
      "I love Apple and Siri!",
      "It's a expensive",
      "Are you Alexa?",
      "Do you hate Fortninte?",
      "OK Google!",
      "Do you like windows?",
      "I don't like safari.",
    ];
    for (let i = 0; i < 100; i++) {
      let li = document.createElement("li");
      let a = document.createElement("a");
      a.setAttribute("href", "#");
      a.textContent = this.asks[Tool.randomNumber(0, this.asks.length - 1)];
      li.appendChild(a);
      this.ul.appendChild(li);
    }
    this.a = document.getElementsByTagName("a");
    for (let i = 0; i < this.a.length; i++) {
      this.a[i].addEventListener("click", function (e) {
        e.preventDefault();
        canvas.glitchSwitch = true;
        for (let i = 0; i < canvas.shapes.length; i++) {
          canvas.shapes[i].cr = 150;
        }
        if (
          this.textContent === "I love Apple and Siri!" ||
          this.textContent === "I'm sorry, Siri."
        ) {
          canvas.glitchSwitch = false;
          for (let i = 0; i < canvas.shapes.length; i++) {
            canvas.shapes[i].cr = 150;
            for (let i = 0; i < canvas.shapes.length; i++) {
              canvas.shapes[i].c = {
                r: Tool.randomNumber(0, 255),
                g: Tool.randomNumber(0, 255),
                b: Tool.randomNumber(0, 255),
                a: 1,
              };
            }
          }
        }
        if (canvas.glitchSwitch === true) {
          for (let i = 0; i < canvas.shapes.length; i++) {
            canvas.shapes[i].c = {
              r: 255,
              g: 0,
              b: 0,
              a: 1,
            };
          }
        }
      });
    }
  }

  // init, render, resize
  init() {
    this.behavior = 0;
    this.time = new Time(Date.now());
    this.glitchSwitch = false;
    this.shapes = [];
    for (let i = 0; i < this.shapeNum; i++) {
      const s = new Shape(this.ctx, 0, this.height - this.height / 5, i + 1);
      this.shapes.push(s);
    }
    this.glitch = new Glitch(this.ctx);
  }

  render() {
    this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < this.shapes.length; i++) {
      this.shapes[i].render(i);
    }
    this.changeBehavior();
    if (this.glitchSwitch === true) {
      this.glitch.render();
    }
  }

  changeBehavior() {
    const e = this.time.getElapsedTime();
    if (e > 4000) {
      this.mes2.setAttribute("class", "siri");
      this.behavior = 1;
    }
    if (e > 8000) {
      this.behavior = 2;
    }
    if (e > 8200) this.behavior = 3;
    if (e > 8400) {
      this.behavior = 4;
    }
    if (e > 9000) {
      this.list.style.opacity = 1;
      this.list.style.display = "block";
      this.list.setAttribute("class", "slideUp");
    }
  }

  resize() {
    this.width = this.canvas.width = window.innerWidth;
    this.height = this.canvas.height = window.innerHeight;
    this.init();
  }
}

/*
  Shape class.
*/

class Shape {
  constructor(ctx, x, y, i) {
    this.ctx = ctx;
    this.init(x, y, i);
  }

  init(x, y, i) {
    this.x = x;
    this.y = y;
    this.i = i;
    this.cr = 50;
    this.a = new Angle(Tool.randomNumber(0, 360));
    this.a1 = new Angle(Tool.randomNumber(0, 360));
    this.step = canvas.width / 360;
    this.c = {
      r: Tool.randomNumber(0, 255),
      g: Tool.randomNumber(0, 255),
      b: Tool.randomNumber(0, 255),
      a: 1,
    };
    this.noiseDist = 10;
    this.noiseX = 1000;
    this.noiseY = 1000;
  }

  drawLine() {
    const ctx = this.ctx;
    ctx.save();
    ctx.globalCompositeOperation = "lighter";
    ctx.lineJoin = "bevel";
    ctx.fillStyle = "rgb(" + this.c.r + ", " + this.c.g + ", " + this.c.b + ")";
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    for (let x = 0; x <= canvas.width; x += this.step) {
      const noise =
        simplex.noise3D(x / this.noiseX, this.y / this.noiseY, this.a.rad) *
        this.noiseDist;
      const y = Math.sin((x * Math.PI) / 180 / 2) * noise + this.y;
      if (x > canvas.width) {
        ctx.lineTo(x * this.step, canvas.height / 2);
      } else {
        ctx.lineTo(x * this.step, y);
      }
    }
    for (let x = canvas.width; x > 0; x -= this.step) {
      const noise =
        simplex.noise3D(x / this.noiseX, this.y / this.noiseY, this.a.rad) *
        -this.noiseDist;
      const y = Math.sin((x * Math.PI) / 180 / 2) * noise + this.y;
      if (x > canvas.width) {
        ctx.lineTo(x * this.step, canvas.height / 2);
      } else {
        ctx.lineTo(x * this.step, y);
      }
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }

  drawCircle() {
    const ctx = this.ctx;
    // in
    ctx.save();
    ctx.globalCompositeOperation = "lighter";
    ctx.fillStyle = Tool.gradientColor(
      ctx,
      this.c.r,
      this.c.g,
      this.c.b,
      this.c.a,
      canvas.width / 2,
      this.y,
      this.cr
    );
    ctx.translate(canvas.width / 2, this.y);
    ctx.rotate(Math.sin(this.a1.rad));
    ctx.scale(Math.cos(this.a1.rad * this.i), Math.sin(this.a1.rad * this.i));
    ctx.translate(-canvas.width / 2, -this.y);
    ctx.beginPath();
    ctx.arc(canvas.width / 2, this.y, this.cr, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.restore();
    // out
    ctx.save();
    ctx.lineWidth = 5;
    ctx.globalCompositeOperation = "lighter";
    ctx.fillStyle = Tool.gradientColor(
      ctx,
      this.c.r,
      this.c.g,
      this.c.b,
      this.c.a,
      canvas.width / 2,
      this.y,
      this.cr
    );
    ctx.strokeStyle = Tool.gradientColor(
      ctx,
      this.c.r,
      this.c.g,
      this.c.b,
      this.c.a,
      canvas.width / 2,
      this.y,
      this.cr + 5
    );
    ctx.beginPath();
    ctx.arc(canvas.width / 2, this.y, this.cr, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.stroke();
    // click
    if (ctx.isPointInPath(canvas.mouseX, canvas.mouseY)) {
      canvas.init();
      this.cr = 50;
      canvas.mouseX = null;
      canvas.mouseY = null;
    }
    ctx.restore();
  }

  changeParams() {
    if (canvas.behavior === 1) {
      this.noiseDist = 30;
      this.noiseX = 100;
      this.noiseY = 100;
    }
    if (canvas.behavior === 2) {
      this.noiseDist *= 1.05;
      this.noiseX *= 1.1;
      this.noiseY *= 1.1;
    }
    if (canvas.behavior === 3) {
      this.noiseDist *= 0.9;
      this.noiseX *= 0.9;
      this.noiseY *= 0.9;
    }
  }

  updateParams() {
    this.a.incDec(1);
    this.a1.incDec(0.5);
    if (this.cr === 51) {
      canvas.glitchSwitch = false;
      this.c = {
        r: Tool.randomNumber(0, 255),
        g: Tool.randomNumber(0, 255),
        b: Tool.randomNumber(0, 255),
        a: 1,
      };
    }
    if (this.cr > 50) this.cr -= 1;
  }

  render() {
    canvas.behavior < 4 ? this.drawLine() : this.drawCircle();
    this.updateParams();
    this.changeParams();
  }
}

/*
  Glitch class.
*/

class Glitch {
  constructor(ctx) {
    this.ctx = ctx;
    this.splitNum = 5;
    this.splitY = canvas.height / this.splitNum;
    this.angles = [];
    this.anglesForRGB = [];
    this.dataArr = [];
    this.getAngles();
    this.getAnglesForRGB();
  }

  getAnglesForRGB() {
    for (let i = 0; i < 3; i++) {
      const a = Tool.randomNumber(0, 360);
      const r = (a * Math.PI) / 180;
      const arr = [a, r];
      this.anglesForRGB.push(arr);
    }
  }

  getAngles() {
    for (var i = 0; i < this.splitNum; i++) {
      const angle = Tool.randomNumber(0, 360);
      const gap = Tool.randomNumber(5, 20);
      const arr = [angle, gap];
      this.angles.push(arr);
    }
  }

  getImageData() {
    for (let i = 0; i < this.splitNum; i++) {
      let d = this.ctx.getImageData(
        0,
        this.splitY * i,
        canvas.width,
        this.splitY + 1
      );
      let data = d.data;
      for (let i = 3; i < data.length - 4; i += 4) {
        if (data[i] < 255) {
          data[i] = 50;
          data[i - 1] = Math.sin(this.anglesForRGB[0][1]) * 255;
          data[i - 2] = Math.cos(this.anglesForRGB[1][1]) * 255;
          data[i - 3] = Math.tan(this.anglesForRGB[2][1]) * 255;
        }
      }
      this.dataArr.push(d);
    }
  }

  updateAnglesForRGB() {
    for (let i = 0; i < this.anglesForRGB.length; i++) {
      this.anglesForRGB[i][1] += Tool.randomNumber(-1, 1) * Math.random();
    }
  }

  addImage() {
    for (let i = 0; i < this.splitNum; i++) {
      if (Math.random() > 0.5) {
        this.ctx.putImageData(
          this.dataArr[i],
          Math.sin((this.angles[i][0] * Math.PI) / 180) * this.angles[i][1],
          this.splitY * i
        );
      } else {
        this.ctx.putImageData(
          this.dataArr[Tool.randomNumber(0, this.splitNum - 1)],
          Math.sin((this.angles[i][0] * Math.PI) / 180) * canvas.width,
          this.splitY * i
        );
      }
    }
  }

  changeAngle() {
    for (var i = 0; i < this.angles.length; i++) {
      this.angles[i][0] += Tool.randomNumber(-50, 50);
    }
  }

  render() {
    this.dataArr = [];
    this.getImageData();
    this.changeAngle();
    this.updateAnglesForRGB();
    this.addImage();
  }
}

(function () {
  "use strict";
  window.addEventListener("load", function () {
    canvas = new Canvas(true);
    canvas.init();

    function render() {
      window.requestAnimationFrame(function () {
        canvas.render();
        render();
      });
    }

    render();

    // event
    window.addEventListener(
      "resize",
      function () {
        canvas.resize();
      },
      false
    );

    canvas.canvas.addEventListener(
      "click",
      function (e) {
        canvas.mouseX = e.clientX;
        canvas.mouseY = e.clientY;
      },
      false
    );
  });
})();

simplex-noise.min.js

!(function () {
  "use strict";
  var r = 0.5 * (Math.sqrt(3) - 1),
    e = (3 - Math.sqrt(3)) / 6,
    t = 1 / 6,
    a = (Math.sqrt(5) - 1) / 4,
    o = (5 - Math.sqrt(5)) / 20;
  function i(r) {
    var e;
    (e =
      "function" == typeof r
        ? r
        : r
        ? (function () {
            var r = 0,
              e = 0,
              t = 0,
              a = 1,
              o =
                ((i = 4022871197),
                function (r) {
                  r = r.toString();
                  for (var e = 0; e < r.length; e++) {
                    var t = 0.02519603282416938 * (i += r.charCodeAt(e));
                    (t -= i = t >>> 0),
                      (i = (t *= i) >>> 0),
                      (i += 4294967296 * (t -= i));
                  }
                  return 2.3283064365386963e-10 * (i >>> 0);
                });
            var i;
            (r = o(" ")), (e = o(" ")), (t = o(" "));
            for (var n = 0; n < arguments.length; n++)
              (r -= o(arguments[n])) < 0 && (r += 1),
                (e -= o(arguments[n])) < 0 && (e += 1),
                (t -= o(arguments[n])) < 0 && (t += 1);
            return (
              (o = null),
              function () {
                var o = 2091639 * r + 2.3283064365386963e-10 * a;
                return (r = e), (e = t), (t = o - (a = 0 | o));
              }
            );
          })(r)
        : Math.random),
      (this.p = n(e)),
      (this.perm = new Uint8Array(512)),
      (this.permMod12 = new Uint8Array(512));
    for (var t = 0; t < 512; t++)
      (this.perm[t] = this.p[255 & t]), (this.permMod12[t] = this.perm[t] % 12);
  }
  function n(r) {
    var e,
      t = new Uint8Array(256);
    for (e = 0; e < 256; e++) t[e] = e;
    for (e = 0; e < 255; e++) {
      var a = e + ~~(r() * (256 - e)),
        o = t[e];
      (t[e] = t[a]), (t[a] = o);
    }
    return t;
  }
  (i.prototype = {
    grad3: new Float32Array([
      1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0, 1, 0, 1, -1, 0, 1, 1, 0, -1, -1,
      0, -1, 0, 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1,
    ]),
    grad4: new Float32Array([
      0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1,
      -1, 0, -1, -1, 1, 0, -1, -1, -1, 1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1,
      0, -1, -1, -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1, 1, 1,
      0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0, 1, -1, 1, 0, -1,
      -1, -1, 0, 1, -1, -1, 0, -1, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1,
      -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0,
    ]),
    noise2D: function (t, a) {
      var o,
        i,
        n = this.permMod12,
        f = this.perm,
        s = this.grad3,
        v = 0,
        h = 0,
        l = 0,
        u = (t + a) * r,
        d = Math.floor(t + u),
        p = Math.floor(a + u),
        M = (d + p) * e,
        m = t - (d - M),
        c = a - (p - M);
      m > c ? ((o = 1), (i = 0)) : ((o = 0), (i = 1));
      var y = m - o + e,
        w = c - i + e,
        g = m - 1 + 2 * e,
        A = c - 1 + 2 * e,
        x = 255 & d,
        q = 255 & p,
        D = 0.5 - m * m - c * c;
      if (D >= 0) {
        var S = 3 * n[x + f[q]];
        v = (D *= D) * D * (s[S] * m + s[S + 1] * c);
      }
      var U = 0.5 - y * y - w * w;
      if (U >= 0) {
        var b = 3 * n[x + o + f[q + i]];
        h = (U *= U) * U * (s[b] * y + s[b + 1] * w);
      }
      var F = 0.5 - g * g - A * A;
      if (F >= 0) {
        var N = 3 * n[x + 1 + f[q + 1]];
        l = (F *= F) * F * (s[N] * g + s[N + 1] * A);
      }
      return 70 * (v + h + l);
    },
    noise3D: function (r, e, a) {
      var o,
        i,
        n,
        f,
        s,
        v,
        h,
        l,
        u,
        d,
        p = this.permMod12,
        M = this.perm,
        m = this.grad3,
        c = (r + e + a) * (1 / 3),
        y = Math.floor(r + c),
        w = Math.floor(e + c),
        g = Math.floor(a + c),
        A = (y + w + g) * t,
        x = r - (y - A),
        q = e - (w - A),
        D = a - (g - A);
      x >= q
        ? q >= D
          ? ((s = 1), (v = 0), (h = 0), (l = 1), (u = 1), (d = 0))
          : x >= D
          ? ((s = 1), (v = 0), (h = 0), (l = 1), (u = 0), (d = 1))
          : ((s = 0), (v = 0), (h = 1), (l = 1), (u = 0), (d = 1))
        : q < D
        ? ((s = 0), (v = 0), (h = 1), (l = 0), (u = 1), (d = 1))
        : x < D
        ? ((s = 0), (v = 1), (h = 0), (l = 0), (u = 1), (d = 1))
        : ((s = 0), (v = 1), (h = 0), (l = 1), (u = 1), (d = 0));
      var S = x - s + t,
        U = q - v + t,
        b = D - h + t,
        F = x - l + 2 * t,
        N = q - u + 2 * t,
        C = D - d + 2 * t,
        P = x - 1 + 0.5,
        T = q - 1 + 0.5,
        _ = D - 1 + 0.5,
        j = 255 & y,
        k = 255 & w,
        z = 255 & g,
        B = 0.6 - x * x - q * q - D * D;
      if (B < 0) o = 0;
      else {
        var E = 3 * p[j + M[k + M[z]]];
        o = (B *= B) * B * (m[E] * x + m[E + 1] * q + m[E + 2] * D);
      }
      var G = 0.6 - S * S - U * U - b * b;
      if (G < 0) i = 0;
      else {
        var H = 3 * p[j + s + M[k + v + M[z + h]]];
        i = (G *= G) * G * (m[H] * S + m[H + 1] * U + m[H + 2] * b);
      }
      var I = 0.6 - F * F - N * N - C * C;
      if (I < 0) n = 0;
      else {
        var J = 3 * p[j + l + M[k + u + M[z + d]]];
        n = (I *= I) * I * (m[J] * F + m[J + 1] * N + m[J + 2] * C);
      }
      var K = 0.6 - P * P - T * T - _ * _;
      if (K < 0) f = 0;
      else {
        var L = 3 * p[j + 1 + M[k + 1 + M[z + 1]]];
        f = (K *= K) * K * (m[L] * P + m[L + 1] * T + m[L + 2] * _);
      }
      return 32 * (o + i + n + f);
    },
    noise4D: function (r, e, t, i) {
      var n,
        f,
        s,
        v,
        h,
        l,
        u,
        d,
        p,
        M,
        m,
        c,
        y,
        w,
        g,
        A,
        x,
        q = this.perm,
        D = this.grad4,
        S = (r + e + t + i) * a,
        U = Math.floor(r + S),
        b = Math.floor(e + S),
        F = Math.floor(t + S),
        N = Math.floor(i + S),
        C = (U + b + F + N) * o,
        P = r - (U - C),
        T = e - (b - C),
        _ = t - (F - C),
        j = i - (N - C),
        k = 0,
        z = 0,
        B = 0,
        E = 0;
      P > T ? k++ : z++,
        P > _ ? k++ : B++,
        P > j ? k++ : E++,
        T > _ ? z++ : B++,
        T > j ? z++ : E++,
        _ > j ? B++ : E++;
      var G = P - (l = k >= 3 ? 1 : 0) + o,
        H = T - (u = z >= 3 ? 1 : 0) + o,
        I = _ - (d = B >= 3 ? 1 : 0) + o,
        J = j - (p = E >= 3 ? 1 : 0) + o,
        K = P - (M = k >= 2 ? 1 : 0) + 2 * o,
        L = T - (m = z >= 2 ? 1 : 0) + 2 * o,
        O = _ - (c = B >= 2 ? 1 : 0) + 2 * o,
        Q = j - (y = E >= 2 ? 1 : 0) + 2 * o,
        R = P - (w = k >= 1 ? 1 : 0) + 3 * o,
        V = T - (g = z >= 1 ? 1 : 0) + 3 * o,
        W = _ - (A = B >= 1 ? 1 : 0) + 3 * o,
        X = j - (x = E >= 1 ? 1 : 0) + 3 * o,
        Y = P - 1 + 4 * o,
        Z = T - 1 + 4 * o,
        $ = _ - 1 + 4 * o,
        rr = j - 1 + 4 * o,
        er = 255 & U,
        tr = 255 & b,
        ar = 255 & F,
        or = 255 & N,
        ir = 0.6 - P * P - T * T - _ * _ - j * j;
      if (ir < 0) n = 0;
      else {
        var nr = (q[er + q[tr + q[ar + q[or]]]] % 32) * 4;
        n =
          (ir *= ir) *
          ir *
          (D[nr] * P + D[nr + 1] * T + D[nr + 2] * _ + D[nr + 3] * j);
      }
      var fr = 0.6 - G * G - H * H - I * I - J * J;
      if (fr < 0) f = 0;
      else {
        var sr = (q[er + l + q[tr + u + q[ar + d + q[or + p]]]] % 32) * 4;
        f =
          (fr *= fr) *
          fr *
          (D[sr] * G + D[sr + 1] * H + D[sr + 2] * I + D[sr + 3] * J);
      }
      var vr = 0.6 - K * K - L * L - O * O - Q * Q;
      if (vr < 0) s = 0;
      else {
        var hr = (q[er + M + q[tr + m + q[ar + c + q[or + y]]]] % 32) * 4;
        s =
          (vr *= vr) *
          vr *
          (D[hr] * K + D[hr + 1] * L + D[hr + 2] * O + D[hr + 3] * Q);
      }
      var lr = 0.6 - R * R - V * V - W * W - X * X;
      if (lr < 0) v = 0;
      else {
        var ur = (q[er + w + q[tr + g + q[ar + A + q[or + x]]]] % 32) * 4;
        v =
          (lr *= lr) *
          lr *
          (D[ur] * R + D[ur + 1] * V + D[ur + 2] * W + D[ur + 3] * X);
      }
      var dr = 0.6 - Y * Y - Z * Z - $ * $ - rr * rr;
      if (dr < 0) h = 0;
      else {
        var pr = (q[er + 1 + q[tr + 1 + q[ar + 1 + q[or + 1]]]] % 32) * 4;
        h =
          (dr *= dr) *
          dr *
          (D[pr] * Y + D[pr + 1] * Z + D[pr + 2] * $ + D[pr + 3] * rr);
      }
      return 27 * (n + f + s + v + h);
    },
  }),
    (i._buildPermutationTable = n),
    "undefined" != typeof define &&
      define.amd &&
      define(function () {
        return i;
      }),
    "undefined" != typeof exports
      ? (exports.SimplexNoise = i)
      : "undefined" != typeof window && (window.SimplexNoise = i),
    "undefined" != typeof module && (module.exports = i);
})();

indx.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>仿苹果Siri动画特效</title>

    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="mes1" class="siri">
      <p>What can I help you with?</p>
    </div>
    <div id="mes2">
      <p>Go ahead, I'm listening...</p>
    </div>
    <div id="list">
      <p>Some things you can ask me.</p>
      <ul></ul>
    </div>

    <script src="js/simplex-noise.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>