피카부 RSS 태그 관리 글쓰기 방명록 다시 시작하는 개발 블로그
2017-06-06 15:36:02

먼저 아래 css 코드를 css파일에 적어 불러오거나 또는 html 파일에 직접 적어 줍니다. 

html에 css 적용 방법 보기

//CSS
.blinking{
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
https://pikabu.tistory.com/103

그 후 HTML의 반짝이는 효과를 주고 싶은 태그의 클래스에 "blinking"을 추가해주면 됩니다.

//HTML
<span class="image blinking"> 반짝이게 하고 싶은 이미지나 텍스트 </span>

꼭 span 이 아니라 거의 모든 태그에 적용이 가능합니다.

위의 1.5s 의 숫자를 적당히 조절하면서 반짝이게 할 수도 있습니다.