SOURCE

console 命令行工具 X clear

                    
>
console
<div class="text">
</div>
<!-- SVG GOOEY FILTER-->
<svg>
  <filter id="gooey">
    <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur">
    </feGaussianBlur>
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -8"
    result="gooey">
    </feColorMatrix>
    <feComposite in="SourceGraphic" in2="gooey" operator="atop">
    </feComposite>
  </filter>
</svg>
body {
  background: #44baa8;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  color: yellow;
  font-size: 300px;
  filter: url(#gooey);
}

.text::before,
.text::after {
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation-duration: 84s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  filter: blur(9px);
}

.text::before {
  content: "58";
  animation-name: items-odd;
}

.text::after {
  content: "59";
  animation-name: items-even;
  animation-delay: 1.5s;
}

@keyframes items-odd {
  1.1904761905% {
    opacity: 1;
  }
  1.7857142857% {
    opacity: 1;
  }
  2.9761904762% {
    opacity: 0;
  }
  3.5714285714% {
    opacity: 0;
  }
  4.7619047619% {
    opacity: 1;
  }
  5.3571428571% {
    opacity: 1;
  }
  6.5476190476% {
    opacity: 0;
  }
  7.1428571429% {
    opacity: 0;
  }
  8.3333333333% {
    opacity: 1;
  }
  8.9285714286% {
    opacity: 1;
  }
  10.119047619% {
    opacity: 0;
  }
  10.7142857143% {
    opacity: 0;
  }
  11.9047619048% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  13.6904761905% {
    opacity: 0;
  }
  14.2857142857% {
    opacity: 0;
  }
  15.4761904762% {
    opacity: 1;
  }
  16.0714285714% {
    opacity: 1;
  }
  17.2619047619% {
    opacity: 0;
  }
  17.8571428571% {
    opacity: 0;
  }
  19.0476190476% {
    opacity: 1;
  }
  19.6428571429% {
    opacity: 1;
  }
  20.8333333333% {
    opacity: 0;
  }
  21.4285714286% {
    opacity: 0;
  }
  22.619047619% {
    opacity: 1;
  }
  23.2142857143% {
    opacity: 1;
  }
  24.4047619048% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  26.1904761905% {
    opacity: 1;
  }
  26.7857142857% {
    opacity: 1;
  }
  27.9761904762% {
    opacity: 0;
  }
  28.5714285714% {
    opacity: 0;
  }
  29.7619047619% {
    opacity: 1;
  }
  30.3571428571% {
    opacity: 1;
  }
  31.5476190476% {
    opacity: 0;
  }
  32.1428571429% {
    opacity: 0;
  }
  33.3333333333% {
    opacity: 1;
  }
  33.9285714286% {
    opacity: 1;
  }
  35.119047619% {
    opacity: 0;
  }
  35.7142857143% {
    opacity: 0;
  }
  36.9047619048% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  38.6904761905% {
    opacity: 0;
  }
  39.2857142857% {
    opacity: 0;
  }
  40.4761904762% {
    opacity: 1;
  }
  41.0714285714% {
    opacity: 1;
  }
  42.2619047619% {
    opacity: 0;
  }
  42.8571428571% {
    opacity: 0;
  }
  44.0476190476% {
    opacity: 1;
  }
  44.6428571429% {
    opacity: 1;
  }
  45.8333333333% {
    opacity: 0;
  }
  46.4285714286% {
    opacity: 0;
  }
  47.619047619% {
    opacity: 1;
  }
  48.2142857143% {
    opacity: 1;
  }
  49.4047619048% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51.1904761905% {
    opacity: 1;
  }
  51.7857142857% {
    opacity: 1;
  }
  52.9761904762% {
    opacity: 0;
  }
  53.5714285714% {
    opacity: 0;
  }
  54.7619047619% {
    opacity: 1;
  }
  55.3571428571% {
    opacity: 1;
  }
  56.5476190476% {
    opacity: 0;
  }
  57.1428571429% {
    opacity: 0;
  }
  58.3333333333% {
    opacity: 1;
  }
  58.9285714286% {
    opacity: 1;
  }
  60.119047619% {
    opacity: 0;
  }
  60.7142857143% {
    opacity: 0;
  }
  61.9047619048% {
    opacity: 1;
  }
  62.5% {
    opacity: 1;
  }
  63.6904761905% {
    opacity: 0;
  }
  64.2857142857% {
    opacity: 0;
  }
  65.4761904762% {
    opacity: 1;
  }
  66.0714285714% {
    opacity: 1;
  }
  67.2619047619% {
    opacity: 0;
  }
  67.8571428571% {
    opacity: 0;
  }
  69.0476190476% {
    opacity: 1;
  }
  69.6428571429% {
    opacity: 1;
  }
  70.8333333333% {
    opacity: 0;
  }
  71.4285714286% {
    opacity: 0;
  }
  72.619047619% {
    opacity: 1;
  }
  73.2142857143% {
    opacity: 1;
  }
  74.4047619048% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  76.1904761905% {
    opacity: 1;
  }
  76.7857142857% {
    opacity: 1;
  }
  77.9761904762% {
    opacity: 0;
  }
  78.5714285714% {
    opacity: 0;
  }
  79.7619047619% {
    opacity: 1;
  }
  80.3571428571% {
    opacity: 1;
  }
  81.5476190476% {
    opacity: 0;
  }
  82.1428571429% {
    opacity: 0;
  }
  83.3333333333% {
    opacity: 1;
  }
  83.9285714286% {
    opacity: 1;
  }
  85.119047619% {
    opacity: 0;
  }
  85.7142857143% {
    opacity: 0;
  }
  86.9047619048% {
    opacity: 1;
  }
  87.5% {
    opacity: 1;
  }
  88.6904761905% {
    opacity: 0;
  }
  89.2857142857% {
    opacity: 0;
  }
  90.4761904762% {
    opacity: 1;
  }
  91.0714285714% {
    opacity: 1;
  }
  92.2619047619% {
    opacity: 0;
  }
  92.8571428571% {
    opacity: 0;
  }
  94.0476190476% {
    opacity: 1;
  }
  94.6428571429% {
    opacity: 1;
  }
  95.8333333333% {
    opacity: 0;
  }
  96.4285714286% {
    opacity: 0;
  }
  97.619047619% {
    opacity: 1;
  }
  98.2142857143% {
    opacity: 1;
  }
  99.4047619048% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
  0% {
    content: "1";
  }
  3.5713285714% {
    content: "1";
  }
  3.5714285714% {
    content: "3";
  }
  7.1427571429% {
    content: "3";
  }
  7.1428571429% {
    content: "5";
  }
  10.7141857143% {
    content: "5";
  }
  10.7142857143% {
    content: "10";
  }
  14.2856142857% {
    content: "10";
  }
  14.2857142857% {
    content: "12";
  }
  17.8570428571% {
    content: "12";
  }
  17.8571428571% {
    content: "14";
  }
  21.4284714286% {
    content: "14";
  }
  21.4285714286% {
    content: "16";
  }
  24.9999% {
    content: "16";
  }
  25% {
    content: "18";
  }
  28.5713285714% {
    content: "18";
  }
  28.5714285714% {
    content: "20";
  }
  32.1427571429% {
    content: "20";
  }
  32.1428571429% {
    content: "22";
  }
  35.7141857143% {
    content: "22";
  }
  35.7142857143% {
    content: "24";
  }
  39.2856142857% {
    content: "24";
  }
  39.2857142857% {
    content: "26";
  }
  42.8570428571% {
    content: "26";
  }
  42.8571428571% {
    content: "28";
  }
  46.4284714286% {
    content: "28";
  }
  46.4285714286% {
    content: "30";
  }
  49.9999% {
    content: "30";
  }
  50% {
    content: "32";
  }
  53.5713285714% {
    content: "32";
  }
  53.5714285714% {
    content: "34";
  }
  57.1427571429% {
    content: "34";
  }
  57.1428571429% {
    content: "36";
  }
  60.7141857143% {
    content: "36";
  }
  60.7142857143% {
    content: "38";
  }
  64.2856142857% {
    content: "38";
  }
  64.2857142857% {
    content: "40";
  }
  67.8570428571% {
    content: "40";
  }
  67.8571428571% {
    content: "42";
  }
  71.4284714286% {
    content: "42";
  }
  71.4285714286% {
    content: "44";
  }
  74.9999% {
    content: "44";
  }
  75% {
    content: "46";
  }
  78.5713285714% {
    content: "46";
  }
  78.5714285714% {
    content: "48";
  }
  82.1427571429% {
    content: "48";
  }
  82.1428571429% {
    content: "50";
  }
  85.7141857143% {
    content: "50";
  }
  85.7142857143% {
    content: "52";
  }
  89.2856142857% {
    content: "52";
  }
  89.2857142857% {
    content: "54";
  }
  92.8570428571% {
    content: "54";
  }
  92.8571428571% {
    content: "56";
  }
  96.4284714286% {
    content: "56";
  }
  96.4285714286% {
    content: "58";
  }
  99.9999% {
    content: "58";
  }
}

@keyframes items-even {
  1.1904761905% {
    opacity: 1;
  }
  1.7857142857% {
    opacity: 1;
  }
  2.9761904762% {
    opacity: 0;
  }
  3.5714285714% {
    opacity: 0;
  }
  4.7619047619% {
    opacity: 1;
  }
  5.3571428571% {
    opacity: 1;
  }
  6.5476190476% {
    opacity: 0;
  }
  7.1428571429% {
    opacity: 0;
  }
  8.3333333333% {
    opacity: 1;
  }
  8.9285714286% {
    opacity: 1;
  }
  10.119047619% {
    opacity: 0;
  }
  10.7142857143% {
    opacity: 0;
  }
  11.9047619048% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  13.6904761905% {
    opacity: 0;
  }
  14.2857142857% {
    opacity: 0;
  }
  15.4761904762% {
    opacity: 1;
  }
  16.0714285714% {
    opacity: 1;
  }
  17.2619047619% {
    opacity: 0;
  }
  17.8571428571% {
    opacity: 0;
  }
  19.0476190476% {
    opacity: 1;
  }
  19.6428571429% {
    opacity: 1;
  }
  20.8333333333% {
    opacity: 0;
  }
  21.4285714286% {
    opacity: 0;
  }
  22.619047619% {
    opacity: 1;
  }
  23.2142857143% {
    opacity: 1;
  }
  24.4047619048% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  26.1904761905% {
    opacity: 1;
  }
  26.7857142857% {
    opacity: 1;
  }
  27.9761904762% {
    opacity: 0;
  }
  28.5714285714% {
    opacity: 0;
  }
  29.7619047619% {
    opacity: 1;
  }
  30.3571428571% {
    opacity: 1;
  }
  31.5476190476% {
    opacity: 0;
  }
  32.1428571429% {
    opacity: 0;
  }
  33.3333333333% {
    opacity: 1;
  }
  33.9285714286% {
    opacity: 1;
  }
  35.119047619% {
    opacity: 0;
  }
  35.7142857143% {
    opacity: 0;
  }
  36.9047619048% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  38.6904761905% {
    opacity: 0;
  }
  39.2857142857% {
    opacity: 0;
  }
  40.4761904762% {
    opacity: 1;
  }
  41.0714285714% {
    opacity: 1;
  }
  42.2619047619% {
    opacity: 0;
  }
  42.8571428571% {
    opacity: 0;
  }
  44.0476190476% {
    opacity: 1;
  }
  44.6428571429% {
    opacity: 1;
  }
  45.8333333333% {
    opacity: 0;
  }
  46.4285714286% {
    opacity: 0;
  }
  47.619047619% {
    opacity: 1;
  }
  48.2142857143% {
    opacity: 1;
  }
  49.4047619048% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51.1904761905% {
    opacity: 1;
  }
  51.7857142857% {
    opacity: 1;
  }
  52.9761904762% {
    opacity: 0;
  }
  53.5714285714% {
    opacity: 0;
  }
  54.7619047619% {
    opacity: 1;
  }
  55.3571428571% {
    opacity: 1;
  }
  56.5476190476% {
    opacity: 0;
  }
  57.1428571429% {
    opacity: 0;
  }
  58.3333333333% {
    opacity: 1;
  }
  58.9285714286% {
    opacity: 1;
  }
  60.119047619% {
    opacity: 0;
  }
  60.7142857143% {
    opacity: 0;
  }
  61.9047619048% {
    opacity: 1;
  }
  62.5% {
    opacity: 1;
  }
  63.6904761905% {
    opacity: 0;
  }
  64.2857142857% {
    opacity: 0;
  }
  65.4761904762% {
    opacity: 1;
  }
  66.0714285714% {
    opacity: 1;
  }
  67.2619047619% {
    opacity: 0;
  }
  67.8571428571% {
    opacity: 0;
  }
  69.0476190476% {
    opacity: 1;
  }
  69.6428571429% {
    opacity: 1;
  }
  70.8333333333% {
    opacity: 0;
  }
  71.4285714286% {
    opacity: 0;
  }
  72.619047619% {
    opacity: 1;
  }
  73.2142857143% {
    opacity: 1;
  }
  74.4047619048% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  76.1904761905% {
    opacity: 1;
  }
  76.7857142857% {
    opacity: 1;
  }
  77.9761904762% {
    opacity: 0;
  }
  78.5714285714% {
    opacity: 0;
  }
  79.7619047619% {
    opacity: 1;
  }
  80.3571428571% {
    opacity: 1;
  }
  81.5476190476% {
    opacity: 0;
  }
  82.1428571429% {
    opacity: 0;
  }
  83.3333333333% {
    opacity: 1;
  }
  83.9285714286% {
    opacity: 1;
  }
  85.119047619% {
    opacity: 0;
  }
  85.7142857143% {
    opacity: 0;
  }
  86.9047619048% {
    opacity: 1;
  }
  87.5% {
    opacity: 1;
  }
  88.6904761905% {
    opacity: 0;
  }
  89.2857142857% {
    opacity: 0;
  }
  90.4761904762% {
    opacity: 1;
  }
  91.0714285714% {
    opacity: 1;
  }
  92.2619047619% {
    opacity: 0;
  }
  92.8571428571% {
    opacity: 0;
  }
  94.0476190476% {
    opacity: 1;
  }
  94.6428571429% {
    opacity: 1;
  }
  95.8333333333% {
    opacity: 0;
  }
  96.4285714286% {
    opacity: 0;
  }
  97.619047619% {
    opacity: 1;
  }
  98.2142857143% {
    opacity: 1;
  }
  99.4047619048% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
  0% {
    content: "2";
  }
  3.5713285714% {
    content: "2";
  }
  3.5714285714% {
    content: "4";
  }
  7.1427571429% {
    content: "4";
  }
  7.1428571429% {
    content: "9";
  }
  10.7141857143% {
    content: "9";
  }
  10.7142857143% {
    content: "11";
  }
  14.2856142857% {
    content: "11";
  }
  14.2857142857% {
    content: "13";
  }
  17.8570428571% {
    content: "13";
  }
  17.8571428571% {
    content: "15";
  }
  21.4284714286% {
    content: "15";
  }
  21.4285714286% {
    content: "17";
  }
  24.9999% {
    content: "17";
  }
  25% {
    content: "19";
  }
  28.5713285714% {
    content: "19";
  }
  28.5714285714% {
    content: "21";
  }
  32.1427571429% {
    content: "21";
  }
  32.1428571429% {
    content: "23";
  }
  35.7141857143% {
    content: "23";
  }
  35.7142857143% {
    content: "25";
  }
  39.2856142857% {
    content: "25";
  }
  39.2857142857% {
    content: "27";
  }
  42.8570428571% {
    content: "27";
  }
  42.8571428571% {
    content: "29";
  }
  46.4284714286% {
    content: "29";
  }
  46.4285714286% {
    content: "31";
  }
  49.9999% {
    content: "31";
  }
  50% {
    content: "33";
  }
  53.5713285714% {
    content: "33";
  }
  53.5714285714% {
    content: "35";
  }
  57.1427571429% {
    content: "35";
  }
  57.1428571429% {
    content: "37";
  }
  60.7141857143% {
    content: "37";
  }
  60.7142857143% {
    content: "39";
  }
  64.2856142857% {
    content: "39";
  }
  64.2857142857% {
    content: "41";
  }
  67.8570428571% {
    content: "41";
  }
  67.8571428571% {
    content: "43";
  }
  71.4284714286% {
    content: "43";
  }
  71.4285714286% {
    content: "45";
  }
  74.9999% {
    content: "45";
  }
  75% {
    content: "47";
  }
  78.5713285714% {
    content: "47";
  }
  78.5714285714% {
    content: "49";
  }
  82.1427571429% {
    content: "49";
  }
  82.1428571429% {
    content: "51";
  }
  85.7141857143% {
    content: "51";
  }
  85.7142857143% {
    content: "53";
  }
  89.2856142857% {
    content: "53";
  }
  89.2857142857% {
    content: "55";
  }
  92.8570428571% {
    content: "55";
  }
  92.8571428571% {
    content: "57";
  }
  96.4284714286% {
    content: "57";
  }
  96.4285714286% {
    content: "59";
  }
  99.9999% {
    content: "59";
  }
}