文字在区域中漂浮

打开新页面

<style>
  @import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);

  .g {
    max-width: 100%;
    height: 442px;
    margin: 10px;
    position: relative;
    padding: 0 1em;
    background-color: #f9f8f6;
    box-shadow: 0 0 1px #aaa;
    user-select: none;
  }

  .g::before {
    z-index: -1;
    position: absolute;
    content: "";
    width: 250px;
    max-width: 70%;
    height: 250px;
    right: 20px;
    bottom: 20px;
    background: #999;
    box-shadow: 0 8px 10px 10px #999;
    transform: skew(2deg, 2deg);
  }
</style>
<div class="g" unselectable="on"></div>
<script>
  !(function () {
    function t(t, n, r) {
      return { x: t, y: n, z: r };
    }
    function n(t) {
      return t.x * t.x + t.y * t.y + t.z * t.z;
    }
    function r(r) {
      return 0 == n(r)
        ? t(0, 0, 0)
        : d(
            r,
            1 /
              (function (t) {
                return Math.sqrt(n(t));
              })(r)
          );
    }
    function a(n) {
      return t(n.x, n.y, n.z);
    }
    function e(t, n) {
      (t.x += n.x), (t.y += n.y), (t.z += n.z);
    }
    function o(n, r) {
      return t(n.x + r.x, n.y + r.y, n.z + r.z);
    }
    function h(n, r) {
      return t(n.x - r.x, n.y - r.y, n.z - r.z);
    }
    function i(n, r) {
      return t(
        n.y * r.z - n.z * r.y,
        n.z * r.x - n.x * r.z,
        n.x * r.y - n.y * r.x
      );
    }
    function d(n, r) {
      return t(n.x * r, n.y * r, n.z * r);
    }
    function p(t, n, r) {
      var a = Math.floor(t),
        e = Math.floor(n),
        o = Math.floor(r),
        h = f(c(t)),
        i = f(c(n)),
        d = f(c(r)),
        p = [
          l(a, e, o),
          l(a + 1, e, o),
          l(a, e + 1, o),
          l(a + 1, e + 1, o),
          l(a, e, o + 1),
          l(a + 1, e, o + 1),
          l(a, e + 1, o + 1),
          l(a + 1, e + 1, o + 1),
        ];
      return u(
        u(u(p[0], p[1], h), u(p[2], p[3], h), i),
        u(u(p[4], p[5], h), u(p[6], p[7], h), i),
        d
      );
      function c(t) {
        return t - Math.floor(t);
      }
      function u(t, n, r) {
        return t + r * (n - t);
      }
      function f(t) {
        return (t = Math.min(Math.max(t, 0), 1)) * t * (3 - 2 * t);
      }
      function l(t, n, r) {
        return (
          2 *
            c(
              43758.5453 *
                Math.sin(12.9898 * t + 78.233 * n + 49.038 * r + 1488)
            ) -
          1
        );
      }
    }
    const c = 20;
    function u(t, n) {
      var r = { t: 0 };
      return (r.p = t), (r.g = n), r;
    }
    function f(n, r, a, e) {
      var o = u(r, e);
      return (
        (o.t = 2),
        (o.p = r),
        (o.v = a),
        (o.a = t(0, 0, 0)),
        (o.d = document.createElement("span")),
        (o.d.style.position = "absolute"),
        (o.d.textContent = n),
        e.appendChild(o.d),
        o
      );
    }
    function l(t, n, r) {
      var a = f(["★", "☆", "♪"][Math.floor(3 * Math.random())], t, n, r);
      return (
        (a.t = 3),
        (a.d.style.position = "absolute"),
        (a.d.style.color = "#000"),
        (a.m = 0),
        (a.dc = 5e3 * Math.random()),
        a
      );
    }
    function y(n, r) {
      if (4 == n.t || 5 == n.t || 3 == n.t) {
        e(n.v, n.a), e(n.p, d(n.v, r)), (n.a = t(0, 0, 0));
        var a = n.g.getBoundingClientRect();
        n.p.x < 9 && (n.p.x = 9),
          a.width - 9 < n.p.x && (n.p.x = a.width - 9),
          n.p.y < 9 && (n.p.y = 9),
          a.height - 9 < n.p.y && (n.p.y = a.height - 9);
      }
    }
    function v(p, l, y) {
      if (
        (1 == p.t &&
          (p.count % 10 == 0 &&
            (l.push(
              (p.prev = (function (n, r, a, e, o, h) {
                var i = f(
                  n,
                  r,
                  t(
                    0.11 * (Math.random() - 0.5),
                    0.015 * (Math.random() - 0.5),
                    0.05 * (Math.random() - 0.5)
                  ),
                  h
                );
                return (
                  (i.t = 5),
                  (i.r = a),
                  (i.l = e),
                  (i.c = 0),
                  (i.d.style.color = "#444"),
                  (i.d.style.transform = "rotateZ(" + a + "deg)"),
                  (i.prev = o),
                  i
                );
              })(
                p.s.charAt(0),
                a(p.p),
                20 * Math.random() - 10,
                300,
                p.prev,
                p.g
              ))
            ),
            (p.s = p.s.substring(1)),
            (p.p.x += 20)),
          p.count++),
        4 == p.t &&
          (!(function (n) {
            e(n.a, t(0, -0.0015, 0));
          })(p),
          x(p),
          M(p, performance.now()),
          p.c++),
        5 == p.t &&
          (x(p),
          p.prev && e(p.a, d(h(o(p.prev.p, t(20, 0, 0)), p.p), 25e-5)),
          M(p, performance.now()),
          p.c++),
        3 == p.t)
      ) {
        var v = p.g.getBoundingClientRect(),
          m = t(0, 0, 0);
        p.p.x < c && e(m, t(1, 0, 0)),
          v.width - c < p.p.x && e(m, t(-1, 0, 0)),
          p.p.y < c && e(m, t(0, 0.2, 0)),
          v.height - c < p.p.y && e(m, t(0, -0.2, 0)),
          e(p.a, d(i(p.v, i(m, p.v)), 3)),
          x(p),
          M(p, performance.now()),
          e(p.a, d(r(p.v), 0.009)),
          e(p.a, t(0, -0.04 * p.v.y, p.p.z * (Math.abs(p.v.z) + 0.001) * -0.1)),
          y.c < 0 &&
            y.y1 < p.p.y &&
            p.p.y < y.y2 &&
            y.d * p.v.x < -0.025 &&
            (p.a.x = 0.005 * y.d);
        for (
          var g = l.filter(function (t) {
              return p != t && (3 == t.t || 5 == t.t) && n(h(p.p, t.p)) < c * c;
            }),
            s = 0;
          s < g.length;
          s++
        )
          e(p.a, d(r(h(p.p, g[s].p)), 0.005));
        if (
          0 !=
          (g = l.filter(function (t) {
            return p != t && 3 == t.t && n(h(p.p, t.p)) < c * c;
          })).length
        ) {
          var z = t(0, 0, 0);
          for (s = 0; s < g.length; s++) e(z, g[s].v);
          var w = d(z, 1 / g.length);
          e(p.a, d(h(w, p.v), 0.08));
        }
        if (0 != g.length) {
          var C = t(0, 0, 0);
          for (s = 0; s < g.length; s++) e(C, g[s].p);
          var b = d(C, 1 / g.length);
          e(p.a, d(h(b, p.p), 25e-5));
        }
        if (
          (p.m++,
          20 < p.m &&
            (g.length <= 0 &&
              l.push(
                (function (n, r, a, e) {
                  var o = f(
                    n,
                    r,
                    t(
                      0.11 * (Math.random() - 0.5),
                      0.015 * (Math.random() - 0.5),
                      0.05 * (Math.random() - 0.5)
                    ),
                    a
                  );
                  return (
                    (o.t = 4),
                    (o.l = 20),
                    (o.c = 0),
                    (o.b = e),
                    (o.d.style.color = "#444"),
                    (o.d.style.transform = "rotateZ(10deg)"),
                    o
                  );
                })(
                  ["☆", "✯", "★", "~", "*"][Math.floor(4 * Math.random())],
                  h(a(p.p), d(p.v, 100)),
                  p.g,
                  p
                )
              ),
            (p.m -= 10)),
          p.dc--,
          p.dc <= 0)
        ) {
          if (g.length <= 1) {
            var B = [
              "富强,民主,文明,和谐~咳咳,放错了",
              "Are We Cool Yet?",
              "n(*≧▽≦*)n",
              "陨入漫天星河之中",
              "EOM万岁!",
              "好像有什么有奇怪的东西混进去了?算了,不管了",
              "∑(っ °Д °;)っ",
              "Starry炒鸡可爱的!!",
              "公开招募女朋友!",
            ];
            l.push(
              (function (n, r, a) {
                var o = u(r, a);
                (o.t = 1), e(o.p, t(-10 * n.length, 0, 0));
                var h = a.getBoundingClientRect();
                return (
                  (o.s = n),
                  (o.count = 0),
                  o.p.x < 0 && (o.p.x = 0),
                  h.width - 20 * n.length < o.p.x &&
                    (o.p.x = h.width - 20 * n.length),
                  o
                );
              })(B[Math.floor(Math.random() * B.length)], a(p.p), p.g)
            );
          }
          p.dc = 5e3 + 2e3 * Math.random();
        }
      }
    }
    function m(t, r) {
      if (1 == t.t) return "" != t.s;
      if (4 == t.t) {
        var a = t.c < t.l;
        if (a)
          for (var e = 0; e < r.length; e++)
            if (r[e] != t.b && 3 == r[e].t && n(h(t.p, r[e].p)) < 300) {
              a = !1;
              break;
            }
        return a || t.g.removeChild(t.d), a;
      }
      return 5 != t.t || (t.l <= t.c && t.g.removeChild(t.d), t.c < t.l);
    }
    function x(t) {
      e(t.a, d(t.v, -0.12));
    }
    function M(n, r) {
      e(
        n.a,
        d(
          t(
            p(n.p.x / 200, n.p.y / 200, r / 500),
            p(n.p.x / 200, n.p.y / 200, (50 + r) / 500),
            p(n.p.x / 200, n.p.y / 200, (100 + r) / 500)
          ),
          0.0015
        )
      );
    }
    function g(n) {
      for (
        var r = [],
          a = n.getBoundingClientRect(),
          e = t(Math.random() * a.width, Math.random() * a.height, 0),
          h = t(
            0.125 * (Math.random() - 0.5),
            0.015 * (Math.random() - 0.5),
            0.05 * (Math.random() - 0.5)
          ),
          i = 0;
        i < 20;
        i++
      )
        Math.random() < 0.5
          ? ((e = o(
              e,
              t(40 * (Math.random() - 0.5), 40 * (Math.random() - 0.5), 0)
            )),
            (h = o(
              h,
              t(
                0.01 * (Math.random() - 0.5),
                0.01 * (Math.random() - 0.5),
                0.01 * (Math.random() - 0.5)
              )
            )),
            e.x < 0 && (e.x = -e.x),
            a.width < e.x && (e.x = 2 * a.width - e.x),
            e.y < 0 && (e.y = -e.y),
            a.height < e.y && (e.y = 2 * a.height - e.y))
          : ((e = t(Math.random() * a.width, Math.random() * a.height, 0)),
            (h = t(
              0.125 * (Math.random() - 0.5),
              0.015 * (Math.random() - 0.5),
              0.05 * (Math.random() - 0.5)
            ))),
          r.push(l(e, h, n));
      var d = performance.now(),
        p = { c: 0, y1: 0, y2: 0, d: 1 };
      !(function t() {
        requestAnimationFrame(t);
        var n = performance.now();
        var e = Math.min(n - d, 40);
        p.c++;
        if (100 < p.c) {
          var o = 0,
            h = 0,
            i = Math.random() * (a.height - 80) + 40,
            c = i + 10 * Math.random() + 30;
          i = 2 * i - c;
          for (var u = 0; u < r.length; u++)
            3 == r[u].t && (r[u].v.x < 0 && o++, 0 < r[u].v.x && h++);
          o < 0.2 * (o + h)
            ? (p = { c: -50, y1: i, y2: c, d: -1 })
            : h < 0.2 * (o + h)
            ? (p = { c: -50, y1: i, y2: c, d: 1 })
            : (p.c = 0);
        }
        for (var u = 0; u < r.length; u++) v(r[u], r, p);
        var f = [];
        for (u = 0; u < r.length; u++) m(r[u], r) && f.push(r[u]);
        r = f;
        for (u = 0; u < r.length; u++) y(r[u], e);
        for (u = 0; u < r.length; u++)
          (l = r[u]),
            4 == l.t &&
              ((l.d.style.left = l.p.x - 9 + "px"),
              (l.d.style.top = l.p.y - 9 + "px"),
              (l.d.style.opacity =
                l.c < 5 ? 0 : Math.min(1, (l.l - l.c) / 10))),
            5 == l.t &&
              ((l.d.style.left = l.p.x - 9 + "px"),
              (l.d.style.top = l.p.y - 9 + "px"),
              (l.d.style.opacity = Math.min(1, (l.l - l.c) / 10, l.c / 10))),
            3 == l.t &&
              ((l.d.style.left = l.p.x - 9 + "px"),
              (l.d.style.top = l.p.y - 9 + "px"),
              (l.d.style.opacity =
                1 -
                Math.pow(1 - Math.abs(Math.atan2(l.v.x, l.v.z)) / Math.PI, 4)),
              (l.d.style.transform =
                "rotateY(" +
                ((-Math.atan2(l.v.x, l.v.z) / Math.PI) * 180 + 90) +
                "deg)rotateZ(" +
                ((-Math.atan2(Math.sqrt(l.v.x * l.v.x + l.v.z * l.v.z), l.v.y) /
                  Math.PI) *
                  180 +
                  90) +
                "deg)"));
        var l;
        d = n;
      })();
    }
    for (var s = document.getElementsByClassName("g"), z = 0; z < s.length; z++)
      g(s[z]);
  })();
</script>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注