果冻字母

下载代码

html

css

分享到微信朋友圈

html

css

*, *:after, *:before {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #F0544F;
  font-family: Roboto, sans-serif;
}

body {
  display: flex;
}

body, .container, .sentence {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 30em;
          perspective: 30em;
}

.container {
  margin: auto;
  -webkit-box-reflect: below -2em -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.4)));
  pointer-events: none;
}

.sentence {
  margin: auto;
  font-size: 4em;
  color: #f0f0f0;
  text-align: center;
}
.sentence span {
  display: inline-block;
  will-change: transform;
  -webkit-animation: animation 2s linear infinite alternate;
          animation: animation 2s linear infinite alternate;
  opacity: 0;
}
.sentence h1 {
  font-weight: bold;
}
.sentence h2 {
  font-weight: thin;
}

@-webkit-keyframes animation {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  1.666667% {
    -webkit-transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1);
            transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1);
  }
  3.333333% {
    -webkit-transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1);
            transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1);
  }
  5% {
    -webkit-transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1);
            transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1);
  }
  6.666667% {
    -webkit-transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1);
            transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1);
  }
  8.333333% {
    -webkit-transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1);
            transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1);
  }
  10% {
    -webkit-transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1);
            transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1);
  }
  11.666667% {
    -webkit-transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1);
            transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1);
  }
  13.333333% {
    opacity: 1;
    -webkit-transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1);
            transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1);
  }
  15% {
    -webkit-transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1);
            transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1);
  }
  16.666667% {
    -webkit-transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1);
            transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1);
  }
  18.333333% {
    -webkit-transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1);
            transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1);
  }
  20% {
    -webkit-transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1);
            transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1);
  }
  21.666667% {
    -webkit-transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1);
            transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1);
  }
  23.333333% {
    -webkit-transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1);
            transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1);
  }
  25% {
    -webkit-transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1);
            transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1);
  }
  26.666667% {
    -webkit-transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1);
            transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1);
  }
  28.333333% {
    -webkit-transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1);
            transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1);
  }
  30% {
    -webkit-transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1);
            transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1);
  }
  31.666667% {
    -webkit-transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1);
            transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1);
  }
  33.333333% {
    -webkit-transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1);
            transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1);
  }
  35% {
    -webkit-transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1);
            transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1);
  }
  36.666667% {
    -webkit-transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1);
            transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1);
  }
  38.333333% {
    -webkit-transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1);
            transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1);
  }
  40% {
    -webkit-transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1);
            transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1);
  }
  41.666667% {
    -webkit-transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1);
            transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1);
  }
  43.333333% {
    -webkit-transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1);
            transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1);
  }
  45% {
    -webkit-transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1);
            transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1);
  }
  46.666667% {
    -webkit-transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1);
            transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1);
  }
  48.333333% {
    -webkit-transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1);
            transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1);
  }
  50% {
    -webkit-transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1);
            transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1);
  }
  51.666667% {
    -webkit-transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1);
            transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1);
  }
  53.333333% {
    -webkit-transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1);
            transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1);
  }
  55% {
    -webkit-transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1);
            transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1);
  }
  56.666667% {
    -webkit-transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1);
            transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1);
  }
  58.333333% {
    -webkit-transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1);
            transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1);
  }
  60% {
    -webkit-transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1);
            transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1);
  }
  61.666667% {
    -webkit-transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1);
            transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1);
  }
  63.333333% {
    -webkit-transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1);
            transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1);
  }
  65% {
    -webkit-transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1);
            transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1);
  }
  66.666667% {
    -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1);
            transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1);
  }
  68.333333% {
    -webkit-transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1);
            transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1);
  }
  70% {
    -webkit-transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1);
            transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1);
  }
  71.666667% {
    -webkit-transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1);
            transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1);
  }
  73.333333% {
    -webkit-transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1);
            transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1);
  }
  75% {
    -webkit-transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1);
            transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1);
  }
  76.666667% {
    -webkit-transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1);
            transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1);
  }
  78.333333% {
    -webkit-transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1);
            transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1);
  }
  80% {
    -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1);
            transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1);
  }
  81.666667% {
    -webkit-transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1);
            transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1);
  }
  83.333333% {
    -webkit-transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1);
            transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1);
  }
  85% {
    -webkit-transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1);
            transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1);
  }
  86.666667% {
    -webkit-transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1);
            transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1);
  }
  88.333333% {
    -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1);
            transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1);
  }
  90% {
    -webkit-transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1);
            transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1);
  }
  91.666667% {
    -webkit-transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1);
            transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1);
  }
  93.333333% {
    -webkit-transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1);
            transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1);
  }
  95% {
    -webkit-transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1);
            transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1);
  }
  96.666667% {
    -webkit-transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1);
            transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1);
  }
  98.333333% {
    -webkit-transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1);
            transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1);
  }
}

@keyframes animation {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  1.666667% {
    -webkit-transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1);
            transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1);
  }
  3.333333% {
    -webkit-transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1);
            transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1);
  }
  5% {
    -webkit-transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1);
            transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1);
  }
  6.666667% {
    -webkit-transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1);
            transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1);
  }
  8.333333% {
    -webkit-transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1);
            transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1);
  }
  10% {
    -webkit-transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1);
            transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1);
  }
  11.666667% {
    -webkit-transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1);
            transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1);
  }
  13.333333% {
    opacity: 1;
    -webkit-transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1);
            transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1);
  }
  15% {
    -webkit-transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1);
            transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1);
  }
  16.666667% {
    -webkit-transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1);
            transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1);
  }
  18.333333% {
    -webkit-transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1);
            transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1);
  }
  20% {
    -webkit-transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1);
            transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1);
  }
  21.666667% {
    -webkit-transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1);
            transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1);
  }
  23.333333% {
    -webkit-transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1);
            transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1);
  }
  25% {
    -webkit-transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1);
            transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1);
  }
  26.666667% {
    -webkit-transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1);
            transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1);
  }
  28.333333% {
    -webkit-transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1);
            transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1);
  }
  30% {
    -webkit-transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1);
            transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1);
  }
  31.666667% {
    -webkit-transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1);
            transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1);
  }
  33.333333% {
    -webkit-transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1);
            transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1);
  }
  35% {
    -webkit-transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1);
            transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1);
  }
  36.666667% {
    -webkit-transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1);
            transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1);
  }
  38.333333% {
    -webkit-transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1);
            transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1);
  }
  40% {
    -webkit-transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1);
            transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1);
  }
  41.666667% {
    -webkit-transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1);
            transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1);
  }
  43.333333% {
    -webkit-transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1);
            transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1);
  }
  45% {
    -webkit-transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1);
            transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1);
  }
  46.666667% {
    -webkit-transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1);
            transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1);
  }
  48.333333% {
    -webkit-transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1);
            transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1);
  }
  50% {
    -webkit-transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1);
            transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1);
  }
  51.666667% {
    -webkit-transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1);
            transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1);
  }
  53.333333% {
    -webkit-transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1);
            transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1);
  }
  55% {
    -webkit-transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1);
            transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1);
  }
  56.666667% {
    -webkit-transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1);
            transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1);
  }
  58.333333% {
    -webkit-transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1);
            transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1);
  }
  60% {
    -webkit-transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1);
            transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1);
  }
  61.666667% {
    -webkit-transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1);
            transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1);
  }
  63.333333% {
    -webkit-transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1);
            transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1);
  }
  65% {
    -webkit-transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1);
            transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1);
  }
  66.666667% {
    -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1);
            transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1);
  }
  68.333333% {
    -webkit-transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1);
            transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1);
  }
  70% {
    -webkit-transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1);
            transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1);
  }
  71.666667% {
    -webkit-transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1);
            transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1);
  }
  73.333333% {
    -webkit-transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1);
            transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1);
  }
  75% {
    -webkit-transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1);
            transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1);
  }
  76.666667% {
    -webkit-transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1);
            transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1);
  }
  78.333333% {
    -webkit-transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1);
            transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1);
  }
  80% {
    -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1);
            transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1);
  }
  81.666667% {
    -webkit-transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1);
            transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1);
  }
  83.333333% {
    -webkit-transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1);
            transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1);
  }
  85% {
    -webkit-transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1);
            transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1);
  }
  86.666667% {
    -webkit-transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1);
            transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1);
  }
  88.333333% {
    -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1);
            transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1);
  }
  90% {
    -webkit-transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1);
            transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1);
  }
  91.666667% {
    -webkit-transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1);
            transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1);
  }
  93.333333% {
    -webkit-transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1);
            transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1);
  }
  95% {
    -webkit-transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1);
            transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1);
  }
  96.666667% {
    -webkit-transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1);
            transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1);
  }
  98.333333% {
    -webkit-transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1);
            transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg