css - hover시 무지개색 테두리

개요

디자인적으로 안 좋을 것 같지만... 태그에 hover시 테두리가 무지개색으로 빛났으면 좋겠다는 생각이 들었다.

반짝이면 예쁘자나

---

코드

/* 무지개 효과 */
div:hover{
  animation-duration: 5s; 
  animation-name: rainbowLink; 
  animation-iteration-count: infinite;
}

@keyframes rainbowLink {     
 0% { border-color: #ff2a2a55; }
 15% { border-color: #ff7a2a55; }
 30% { border-color: #ffc52a55; }
 45% { border-color: #43ff2a55; }
 60% { border-color: #2a89ff55; }
 75% { border-color: #20208255; }
 90% { border-color: #6b2aff55; } 
 100% { border-color: #e82aff55; }
}

---

적용 완료

역시 반짝이면 예뻥

---

참고

1. Dong-gri님 블로그
2. CSS 애니메이션 사용하기