.title, .title__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  font-size: 13rem;
}
.title::after, .title::before, .title__inner::after, .title__inner::before {
  content: "BD6JDU";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  font-family: 'Open Sans', sans-serif;
  z-index: -1;
}

.title {
  color: transparent;
}
.title::after {
  color: #00b4f4;
  -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
  font-weight: 300;
  animation: path-1 7s -1s ease infinite;
}
.title::before {
  color: #fe9400;
  -webkit-clip-path: polygon(10% 0, 0 9%, 0 91%, 8% 100%, 91% 100%, 100% 90%, 90% 82%, 81% 89%, 17% 89%, 11% 81%, 10% 18%, 18% 10%, 81% 9%, 91% 20%, 90% 83%, 100% 89%, 100% 11%, 86% 0);
  text-stroke: 2px rgba(10, 100, 250, 0);
  text-fill-color: transparent;
  font-weight: 700;
  animation: path-2 7s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes path-1 {
  20% {
    color: #f23737;
    -webkit-clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
    font-weight: 800;
  }
  40% {
    color: #e383ea;
    -webkit-clip-path: polygon(99% 0, 100% 0, 100% 100%, 100% 100%);
    font-weight: 300;
  }
  80% {
    color: #69f4e2;
    -webkit-clip-path: polygon(40% 0, 50% 0, 50% 100%, 40% 100%);
    font-weight: 400;
  }
}
@keyframes path-2 {
  40%, 90% {
    -webkit-clip-path: polygon(31% 11%, 13% 28%, 22% 70%, 30% 81%, 73% 81%, 76% 50%, 67% 55%, 63% 73%, 37% 72%, 31% 64%, 24% 33%, 32% 24%, 57% 20%, 64% 34%, 43% 45%, 48% 56%, 79% 39%, 65% 10%);
  }
  20%, 70% {
    -webkit-clip-path: polygon(45% 51%, 45% 53%, 44% 53%, 45% 52%, 45% 51%, 44% 51%, 45% 51%, 45% 52%, 43% 52%, 44% 53%, 45% 51%, 46% 53%, 45% 51%, 43% 54%, 44% 53%, 45% 54%, 43% 52%, 45% 51%);
    text-stroke: 6px #6450ff;
  }
  100% {
    -webkit-clip-path: polygon(10% 0, 0 9%, 0 91%, 8% 100%, 91% 100%, 100% 90%, 90% 82%, 81% 89%, 17% 89%, 11% 81%, 10% 18%, 18% 10%, 81% 9%, 91% 20%, 90% 83%, 100% 89%, 100% 11%, 86% 0);
    text-stroke: 2px rgba(255, 100, 250, 0);
  }
}
.title__inner {
  color: transparent;
}
.title__inner::after {
  color: #906b92;
  -webkit-clip-path: polygon(0 7%, 4% 0, 20% 0, 0 20%);
  font-weight: 600;
  animation: path-3 7s -1s ease infinite;
}
.title__inner::before {
  color: #4fb3a7;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 7% 100%, 7% 5%, 95% 5%, 95% 93%, 10% 93%, 11% 100%, 100% 100%, 100% 0%);
  text-stroke: 2px rgba(255, 255, 255, 0);
  text-fill-color: transparent;
  font-weight: 800;
  font-style: italic;
  animation: path-4 7s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes path-3 {
  20%, 70% {
    color: #fff;
    -webkit-clip-path: polygon(86% 100%, 100% 82%, 100% 93%, 97% 100%);
    font-weight: 300;
  }
  40% {
    color: #b1e3ea;
    -webkit-clip-path: polygon(0 93%, 93% 0, 100% 8%, 8% 100%);
    font-weight: 800;
  }
  100% {
    color: #fff;
    -webkit-clip-path: polygon(0 7%, 4% 0, 20% 0, 0 20%);
  }
}
@keyframes path-4 {
  80% {
    -webkit-clip-path: polygon(0 0, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0);
  }
  40% {
    -webkit-clip-path: polygon(39% 20%, 4% 98%, 11% 93%, 60% 20%, 83% 14%, 45% 65%, 25% 78%, 17% 89%, 66% 69%, 94% 6%);
    text-stroke: 1px #c8fa00;
  }
  0%, 100% {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 7% 100%, 7% 5%, 95% 5%, 95% 93%, 10% 93%, 11% 100%, 100% 100%, 100% 0%);
  }
}
* {
  margin: 0;
  padding: 0;
}

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

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #27292a;
  font-family: 'Open Sans', sans-serif;
}


.flex-container {
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: flex-end; /* 垂直底部居中 */
	height: 95%; /* 容器高度 */
}