티스토리 뷰

공부

[CSS] Mouse hover rainbow font-color

승가비 2020. 4. 16. 00:41
728x90
a:hover, a:focus { animation-duration: 3s; animation-name: rainbowLink; animation-iteration-count: infinite; } 
@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; }
}

 

https://medium.com/guleum/css-%EB%A7%81%ED%81%AC-hover%EC%8B%9C-%EB%AC%B4%EC%A7%80%EA%B0%9C-%ED%9A%A8%EA%B3%BC-css3%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-8981fcb4fbf3

 

[CSS] 링크 Hover시, 무지개 효과 CSS3로 구현하기

Tistory 플러그인으로 제공되고 있고, 5년전만 해도 개인 블로그/웹사이트에 많이 적용되었던 마우스 오버시 링크가 무지개색으로 변하는 효과!

medium.com

 

728x90
저작자표시 비영리

'공부' 카테고리의 다른 글

[Linux] mkdir + chmod 777 `mkdir -m 777 name`  (0) 2020.04.16
[Hadoop] WebHDFS REST API  (0) 2020.04.16
[Python] timezone KST  (0) 2020.04.16
[Python] BeautifulSoup4 select  (0) 2020.04.14
[Python] flask  (0) 2020.04.14
댓글