CSS 애니메이션 05

거울 반사 효과.

html{
  height: 100%;
}
body {
  height: 100%;
  background: radial-gradient(cyan, darkblue);
  padding: 0;
  margin: 0;
}
div {
  position: absolute;
  left: 50%; top:50%;
  transform: translate(-50%, -50%);
  font-size: 150px;
  font-family: arial;
  font-weight: 700;
  letter-spacing: -5px;
  line-height: 100%;
  color: #fff;
  transition: all 0.5s;
}
div::before {
  content: attr(data-text);
  position: absolute;
  bottom: 43px;
  transform: rotateX(180deg);
  transform-origin: bottom;
  background:
          linear-gradient(to top,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0) 23px,
          rgba(255, 255, 255, 0.8) 23px,
          rgba(255, 255, 255, 0.3) 50%,
          rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  color: transparent;
}

div:hover {
  letter-spacing: 50px;
}

<div data-text="MJAEDOT">MJAEDOT</div>

---

REFERENCE
https://www.youtube.com/watch?v=C_FBiumn3dk