[해피CGI][cgimall] CSS 만으로 반짝 이는 글자 효과를 나타내는 text-shadow, transition 활용하기

CSS만으로 마우스 오버시 반짝이는 모션이 들어가는 텍스트를 나타내는 기능으로,

text-shadow 와 transition 을 사용하여 멋진 효과를 확인해보세요.

 

JS와 gif 같은 이미지 없이도, Hover기능과 Transition을 활용하여
마우스 오버한 A태그에 빛이 나도록 변경해볼께요

html

<a href="#" class="a_style">해피CGI</a>

위와같이 A태그에 a_style이라는 클래스를 지정해주세요.
그리고 나서 아래와같이 CSS를 선언해주세요.


CSS

.a_style {
 color: yellow;
 text-decoration: none;
 transition: 1s;
}
.a_style:hover { text-shadow: 0 0 .1em, 0 0 .3em; }

color가 폰트 색상이고, 해당색상 기준으로 글자 옆으로 반짝반짝 효과가 나게될겁니다.