[CSS] 티스토리 카테고리 마우스 효과 #무지개효과 #hover

# 티스토리 카테고리 마우스 효과

카테고리 혹은 링크로 설정된 요소 위에 마우스를 올리면 색이 변하도록 설정하는 방법입니다

 

 

1. 해당 요소 확인

📢 제가 사용하는 hELLO을 기준으로 설정하는 것이며 다른 스킨인 경우 적용이 안 될 수 있다는 점 참고해 주세요!

 

자신의 블로그에 들어가서 개발자 모드(F12)를 켜줍니다

개발자 모드에 요소 선택 버튼으로 카테고리 부분을 선택

 

 

link_item 요소를 클릭하면 적용된 스타일이 있는 것을 확인할 수 있습니다

 

 

2. CSS 수정

2.1 수정할 요소 찾기

티스토리 관리자 페이지(티스토리URL/manage)에서 스킨 편집 > html 편집에서 css를 수정

 

우측에 있는 HTML | CSS | 파일업로드에서 CSS를 클릭하고 1번에서 확인한 스타일을 검색

#sidebar .el a:not(.link_tit)

 

 

검색된 이 기본 스타일을 바꿔주기!

 

2.2 스타일 변경

기존에 있던 color는 주석 처리한 뒤 추가로 작성

• animation-duration : 애니메이션이 한 사이클을 완료하는 시간
• animation-name : 애니메이션 이름 (@keyframes로 정의한 애니메이션 명을 넣어주면 됨)
• animation-iteration-count : 애니메이션 반복 주기 (infinite은 무한 반복)

#sidebar .el a:not(.link_tit):hover {
  --tw-text-opacity: 1;
  
  animation-duration: 1.5s;
  animation-name: rainbowLink;
  animation-iteration-count: infinite;
  
  /* color: rgb(30 31 33 / var(--tw-text-opacity)) */
}

@keyframes rainbowLink {     
 0% { color: #ff2a2a; }
 15% { color: #ff7a2a; }
 30% { color: #ffc52a; }
 45% { color: #43ff2a; }
 60% { color: #2a89ff; }
 75% { color: #202082; }
 90% { color: #6b2aff; } 
 100% { color: #e82aff; }
}