8/21 - CSS 텍스트 효과

CSS

@keyframes gradientSparkle {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-text {
  font-size: 2rem;
  background: linear-gradient(45deg, #ffcc33, #ff0066, #660099);
  background-size: 300% 300%; /* 배경 크기 확대 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientSparkle 4s ease infinite; /* 애니메이션 속도와 효과 */
}