html 반짝반짝 효과 주기

CSS3를 이용해서 반짝반짝 효과를 주는 방법에 대해 알아보자. 

CSS BLINK라고 검색하면 유사 결과를 여러개 검색할 수 있다. 

  <style type="text/css">
  @-webkit-keyframes blinker {  
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
.blink {
  -webkit-animation-name: blinker;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-duration: 1s; 
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-direction: alternate;
}
  </style>

위의 소스를 복사해서 head에 붙이면 된다. 

     

.

1초 후에는 아래와 같이 보인다. 

   

-webkit-animation-duration: 2s 는 2초 간격으로 반복하라는 의미이다. 이 부분을 조절해서 원하는 스타일로 보이게 할 수 있다. 

.