JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<ul class="container">
  <li id="stroke" class="text">
    <i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0s);">H</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.1s);">O</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.2s);">N</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.3s);">G</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.4s);">D</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.5s);">A</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.6s);">&nbsp;L</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.7s);">I</i><i class="text-effect" style="animation-duration: 1s; animation-delay: calc(0.8s);">N</i>
    <i class="text-effect" style="animation-duration: 1s; animation-delay: calc(1s);">&nbsp;</i>
  </li>
</ul>

CSS

@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");

body {
  height: 100vh;
  display: flex;
}

i {
  font-style: normal;
}

.container {
  margin: auto;
  font-weight: bold;
  font-size: max(1.5rem, 10vw);
  line-height: 1.5;
  text-align: center;
  z-index: 2;
}

.container .text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: "Luckiest Guy";
  background: linear-gradient(135deg, #0000 0, yellow 25%, yellow 75%, #0000) no-repeat 0/400%;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black;
  -webkit-background-clip: text;
  cursor: pointer;
  animation: perspective-reverse .5s ease-out forwards, bg-reverse .7s ease-out forwards;
}

.container .text:hover {
  animation: perspective-hover .5s ease-in forwards, bg-hover .7s ease-in forwards;
}

.container #stroke::after {
  content: "鴻達鴻達";
  font-weight: 400;
  position: absolute;
  top: 53%;
  right: 0;
  bottom: 0;
  width: 2em;
  white-space: normal;
  font-size: max(1.5rem / 6, 10vw / 6);
  line-height: 1;
}

@keyframes perspective-hover {
  0% {
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    background-position: 200% 100%;
  }

  50% {
    transform: perspective(1600px) rotateX(5deg) rotateY(5deg) translateZ(50px);
  }

  100% {
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(100px);
    background-position: 50% 100%;
  }
}

@keyframes bg-hover {
  0% {
    background-position: 200% 100%;
  }

  100% {
    background-position: 50% 100%;
  }
}

@keyframes perspective-reverse {
  0% {
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(100px);
    background-position: 50% 100%;
  }

  50% {
    transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg) translateZ(50px);
  }

  100% {
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    background-position: -100% 100%;
  }
}

@keyframes bg-reverse {
  0% {
    background-position: 50%...