多彩噪点变换动画效果-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：多彩噪点变换动画效果，五彩缤纷，类似于宇宙大爆炸的效果

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

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

<style>

html, body {
  overflow: hidden;
  background: #000;
  padding: 0px;
  margin: 0px;
}

.aon {
  position: absolute;
  top: 0px;
  left: 0px;
}
.aon a {
  position: relative;
  display: inline-block;
  outline: none;
  margin: 0 0px;
  padding: 15px 10px;
  color: #fff;
  text-decoration: none;
  font-family: Cinzel;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  font-size: 1em;
}
.aon a:focus::before, .aon a:hover::before {
  height: 6px;
}
.aon a:hover::before, .aon a:hover::after, .aon a:focus::before, .aon a:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}
.aon a:hover span:last-child, .aon a:focus span:last-child {
  opacity: 1;
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  transform: translateY(0%);
}
.aon a span {
  color: #fff !important;
}
.aon a span:first-child {
  z-index: 2;
  display: block;
  font-weight: 300;
}
.aon a span:last-child {
  z-index: 1;
  display: block;
  padding: 8px 0 0 0;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: none;
  text-transform: none;
  font-style: italic;
  font-size: 1.2em;
  font-family: Cinzel Decorative;
  font-weight: 600;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.aon a::before, .aon a::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  content: '';
  opacity: 0.2;
  -webkit-transition: opacity 0.3s, height 0.3s;
  -moz-transition: opacity 0.3s, height 0.3s;
  transition: opacity 0.3s, height 0.3s;
}
.aon a::after {
  top: 100%;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transform: translateY(-10px);
}
.aon a:hover {
  outline: none;
}
</style>

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

<canvas id="canvas"></canvas>
<script>
    !function(t) {
    var o = t.noise = {};
    function r(t, o, r) {
        this.x = t,
        this.y = o,
        this.z = r
    }
    r.prototype.dot2 = function(t, o) {
        return this.x * t + this.y * o
    }
    ,
    r.prototype.dot3 = function(t, o, r) {
        return this.x * t + this.y * o + this.z * r
    }
    ;
    var n = [new r(1,1,0), new r(-1,1,0), new r(1,-1,0), new r(-1,-1,0), new r(1,0,1), new r(-1,0,1), new r(1,0,-1), new r(-1,0,-1), new r(0,1,1), new r(0,-1,1), new r(0,1,-1), new r(0,-1,-1)]
      , e = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180]
      , a = new Array(512)
      , i = new Array(512);
    o.seed = function(t) {
        t > 0 && t < 1 && (t *= 65536),
        (t = Math.floor(t)) < 256 && (t |= t << 8);
        for (var o = 0; o < 256; o++) {
            var r;
            r = 1 & o ? e[o] ^ 255 & t : e[o] ^ t >> 8 & 255,
            a[o] = a[o + 256] = r,
            i[o] = i[o + 256] = n[r % 12]
        }
    }
    ,
    o.seed(0);
    var d = .5 * (Math.sqrt(3) - 1)
      , f = (3 - Math.sqrt(3)) / 6
      , h = 1 / 6;
    function u(t) {
        return t * t * t * (t * (6 * t - 15) + 10)
    }
    function s(t, o, r) {
        return (1 - r) * t + r * o
    }
    o.simplex2 = function(t, o) {
        var r, n, e = (t + o) * d, h = Math.floor(t + e), u = Math.floor(o + e), s = (h + u) * f, l = t - h + s, w = o - u + s;
        l > w ? (r = 1,
        n = 0) : (r = 0,
        n = 1);
        var v = l - r + f
          , M = w - n + f
          , c = l - 1 + 2 * f
          , p = w - 1 + 2 * f
          , y = i[(h &= 255) + a[u &= 255]]
          , x = i[h + r + a[u + n]]
          , m = i[h + 1 + a[u + 1]]
          , q = .5 - l * l - w * w
          , z = .5 - v * v - M * M
          , A = .5 - c * c - p * p;
        return 70 * ((q < 0 ? 0 : (q *= q) * q * y.dot2(l, w)) + (z < 0 ? 0 : (z *= z) * z * x.dot2(v, M)) + (A < 0 ? 0 : (A *= A) * A * m.dot2(c, p)))
    }
    ,
    o.simplex3 = function(t, o, r) {
        var n, e, d, f, u, s, l = (t + o + r) * (1 / 3), w = Math.floor(t + l), v = Math.floor(o + l), M = Math.floor(r + l), c = (w + v + M) * h, p = t - w + c, y = o - v + c, x = r - M + c;
        p >= y ? y >= x ? (n = 1,
        e = 0,
      .........完整代码请登录后点击上方下载按钮下载查看