텍스트 무지개 애니메이션

텍스트에 무지개 애니메이션 효과 적용하기

웹 디자인에서 애니메이션 효과는 사용자 경험을 향상시키는 중요한 요소입니다. 이번 블로그에서는 텍스트에 무지개 애니메이션 효과를 적용하는 방법을 알아보겠습니다. CSS만으로 간단하게 구현할 수 있으며, 부드러운 색상 전환과 움직임을 통해 눈길을 끄는 디자인을 만들 수 있습니다.

---

최종 코드

아래는 무지개 애니메이션을 텍스트에 적용하는 CSS 코드입니다:

 

<a class="gradient-text" title="가이드 보기">
  <i class="far fa-question-circle"></i>
</a>

.gradient-text {
  font-size: 1em; /* 텍스트 크기 설정 */
  font-weight: 500; /* 텍스트 두께 설정 */
  cursor: pointer; /* 마우스 커서 포인터로 변경 */
  background: linear-gradient(45deg, #fc8080, #ffa500, #ffff00, #008000, #4b0082, #ee82ee, #fc8080);
  background-size: 200% 200%; /* 배경 크기 확장 */
  -webkit-background-clip: text; /* 텍스트에만 배경 클립 */
  -webkit-text-fill-color: transparent; /* 텍스트 외부 색상 투명 처리 */
  animation: gradient-move 1.5s linear infinite; /* 애니메이션 설정 */
}

@keyframes gradient-move {
  0% {
    background-position: 200% 0%; /* 시작 위치 */
  }
  100% {
    background-position: -200% 0%; /* 끝 위치 */
  }
}

---

코드 설명

1. linear-gradient로 배경 설정

background: linear-gradient(45deg, ...)를 사용하여 색상이 부드럽게 전환되는 그라데이션을 생성합니다.
다양한 색상을 추가하여 무지개 느낌을 구현했습니다:

• 45도: 그라데이션의 방향.
• 색상 순서: 무지개 색상(#fc8080, #ffa500, #ffff00, 등)을 추가.

2. 배경을 텍스트에만 적용

-webkit-background-clip: text를 사용하면 배경이 텍스트에만 표시됩니다.
-webkit-text-fill-color: transparent로 배경 외부는 투명하게 처리합니다.

3. 애니메이션으로 움직임 추가

@keyframes gradient-move를 사용해 배경의 위치를 지속적으로 변경합니다:

• 0%: 배경이 오른쪽에서 시작.
• 100%: 배경이 왼쪽으로 이동.

4. 애니메이션 속성

• animation: gradient-move 1.5s linear infinite;
  • 1.5s: 애니메이션이 한 번 완성되는 데 걸리는 시간.
  • linear: 일정한 속도로 움직임.
  • infinite: 애니메이션이 반복적으로 실행.

---

응용 방법

1. 버튼 텍스트: 클릭 가능한 버튼 텍스트에 사용해 사용자 주의를 끌 수 있습니다.
2. 헤더 텍스트: 사이트의 주요 제목에 적용하면 시각적 효과를 극대화할 수 있습니다.
3. 로고 애니메이션: 텍스트 기반 로고에 활용하면 브랜드 이미지를 돋보이게 할 수 있습니다.

---

결과

위 코드를 적용하면 아래와 같은 무지개 애니메이션 효과가 구현됩니다:

이 효과는 단순하지만 강렬한 시각적 요소로, 다양한 웹 페이지 디자인에 활용 가능합니다.