blink 정말 오랜만에 보는 단어 이군요...ㅠㅠ;
이제 없어진 기능이기도 하고 잘 쓰는 효과도 아니였으니깐요...^^; 나만 그런가..ㅋㅋ
일하다 보니 깜빡이는 텍스트 효과가 필요해서...ㅋㅋㅋ
html5 부터 blink 지원하지 않습니다.
하지만 사용자단은 그렇지만 관리자단에서는 필요할때가 있습니다.
그래서 이렇게 css의 키프레임을 이용하여 만들었습니다.
자바스크립트 또는 제이쿼리로 만들 수 있지만 제일 효율적이라 판단됩니다.
/* html 소스 */
<div class="blinking">깜빡이는 텍스트</div>
/* 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:1;}
20% {opacity:0;}
40% {opacity:1;}
60% {opacity:0;}
80% {opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes blink{
0% {opacity:1;}
20% {opacity:0;}
40% {opacity:1;}
60% {opacity:0;}
80% {opacity:1;}
100% {opacity:0;}
}
@keyframes blink{
0% {opacity:1;}
20% {opacity:0;}
40% {opacity:1;}
60% {opacity:0;}
80% {opacity:1;}
100% {opacity:0;}
}
아래는 혹시 몰라 제이쿼리로 간단하게 구현해 봤다 그런데 사용에는 좀 문제가 있다
css 기본적인 부분을 잘 잡아줘야 하는...ㅋㅋ
/*
setInterval(function(){
$(".blinking).toggle('');
}, 250);
*/