body {
  background-color: #151522;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 90%;
  height: 90%;
  visibility: hidden;
}

.sparkle {
  /* mix-blend-mode:luminosity */
}
@keyframes wenzi {
  0% {
    width: 0;
  }
}

@keyframes guangbiao {
  50% {
    /* 颜色透明 */
    border-color: transparent;
  }
}
.custom {
  position: absolute;
  bottom: 30px;
  color: #fff;
  /* display: none; */
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, #eccc68),
    color-stop(0.15, #ff7f50),
    color-stop(0.3, #ff6b81),
    color-stop(0.45, #ffa502),
    color-stop(0.6, #ff6348),
    color-stop(0.75, #ff4757),
    color-stop(0.9, #7bed9f),
    color-stop(1, #70a1ff)
  );
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;

  width: 17em;
  overflow: hidden;
  /* 规定段落中的文本不进行换行： */
  white-space: nowrap;
  font-size: 20px;
  border-right: 0em solid;
  /*帧动画 */
  animation: wenzi steps(17) 6s, guangbiao steps(1) 1s infinite;
  transition: all 0.5s;
}