[아임웹 코드] 빛나는 텍스트 애니메이션 효과

시연 동영상 보기

<div class="shinytextanimation">

<p class="shinytext">아임웹 빛나는 텍스트 애니메이션 효과</p>

</div>

<style>

  .shinytextanimation{

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background-color: #000;

}

.shinytext {

  position: relative;

  font-family: sans-serif;

  text-transform: uppercase;

  font-size: 42px;

  font-weight:900;

  letter-spacing: 4px;

  overflow: hidden;

  background: linear-gradient(90deg, #000, #fff, #000);

  background-repeat: no-repeat;

  background-size: 80%;

  animation: animate 3s linear infinite;

  -webkit-background-clip: text;

  -webkit-text-fill-color: rgba(255, 255, 255, 0);

}

@keyframes animate {

  0% {

    background-position: -500%;

  }

  100% {

    background-position: 500%;

  }

}

</style>