[css] 티스토리 무지개 링크 스맙 멤컬로 바꾸기

https://omnil.tistory.com/89

[HTML/CSS][블로그 꾸미기] 블로그(티스토리)에서 무지개 링크 사용하기

*이 블로그 글을 참고했습니다

 

---

티스토리 블로그에 널리 사용되는 플러그인 중 하나로 무지개 링크 (짱 예쁨)가 있다

 

 

 

무지개 링크 잘 쓰고 있긴 하지만 블로그명에서도 알 수 있듯이 나는 스맙 팬이고..

스맙 팬이면 멤버 컬러를 여기저기 쓰는 게 당연한 거 아냐??!ㅋㅋ 싶어서 바꾸기로 했다

*참고로 내 버티컬 마우스랑 필통이랑 닌텐도 케이스 색이 레드인 건 내가 기무라담이라서..이다......>_<v

css 애니메이션 기능을 사용하면 쉽게 구현할 수 있다!
플러그인 코드 뜯어봤을 때 봤던 것보다 훨씬 쉬워서 놀랐다

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN

 

이건 관련해서 찾아본 거...

5s는 좀 긴 것 같아서 (무지개 링크는 확확 바뀌니까) 3s로 바꿨다

 

그냥 기본적으로 주어지는 색을 적용할 수도 있겠지만 파스텔톤이 예쁘니까 수정했다

https://www.webdesignrankings.com/resources/lolcolors/

LOL Colors - Curated color palette inspiration

여기서 맘에 드는 팔레트를 기반으로 조화를 고려해서 만들었다ㅋㅋ

 

스마스마 컬러가 아니라서 나카이군 블루 /고로짱 핑크이다>_<

 

그런데.. 내가 모리군 생일을 잘못 알고 있었다... 당연히 고로짱보다 위일 줄 알았어..!!!!!ㅜㅜ 

그래서 코드 수정함...ㅎ..ㅎㅎ ㅈㅅㅈㅅ

a:hover { animation: smap 3s infinite linear; }
@keyframes smap {
    0%   {color: rgb(173,203,249);	}
    20%  {color: rgb(252,157,154);	}
    40%  {color: rgb(254,218,218);	}
    60%  {color: rgb(239,241,242);	}
	80%	 {color: rgb(250,236,192);	}
    100% {color: rgb(213,227,188);	}
}

악 정렬 왜 저래 

 

결과: https://pyoumg.herokuapp.com 

 

아무 링크나 가져왔당

 

 

+

 

초록-파랑의 연결이 부자연스러워서 고침

++근데 도쿄타워 색 정렬보면 모리-고로 순이던데!!@_@ 잘 모르겠다