메인 로고 Mouseover시에 색상 애니메이션 주는 법

다른 블로그에서 메인로고에 마우스 오버시 무지개 색상으로 애니메이션을 준 것을 보았다.

hover 기능은 확실하고 애니메이션 기능인 것 같아

마우스오버, 애니메이션, 무지개 등의 키워드로 찾아본 결과

a:hover { 
  animation-duration: 3s; 
  animation-name: rainbow; 
  animation-iteration-count: infinite; } 
  
@keyframes rainbow {     
 0% { color: #ff2a2a; }
 15% { color: #ff7a2a; }
 30% { color: #ffc52a; }
 45% { color: #43ff2a; }
 60% { color: #2a89ff; }
 75% { color: #202082; }
 90% { color: #6b2aff; } 
 100% { color: #e82aff; }
}

animation-duration 프레임을 한 번 재생하는데 걸리는 시간
animation-name keyframes로 설정한 프레임 할당
animation-iteration-count 프레임을 몇 번 반복할 것인지

• 0% : 애니메이션의 시작 프레임이다.
• 100% : 애니메이션의 마지막 프레임이다.
• from : 애니메이션의 시작 프레임이다. 0% 와 같다.
• to : 애니메이션의 마지막 프레임이다. 100% 와 같다.

0%와 100% 사이에는 여러 개의 중간 값(%)을 설정해 프레임을 작성할 수 있다.

 

 

스킨 편집에 들어가서 html편집 클릭

메인로고 태그를 찾아준다

s_if, s_not이나 같은 걸 보면 티스토리에서 쓰이는 문법인가보다

(https://tistory.github.io/document-tistory-skin/common/global.html)

CSS 파일에 스타일을 추가해준 뒤 적용하면 끝!

더 찾아보니 티스토리 플러그인으로 존재하고 있었다!

[설정] -> [플러그인] -> [무지개링크] -> [적용]

적용된 블로그에서 코드를 뒤져봤는데

시간을 이용해 색상을 부여하고 모든 링크에 적용을 해주는 것 같다.

나는 원래 메인로고에만 적용하려고 했으므로 수정하지는 않겠다.