먼저 아래 css 코드를 css파일에 적어 불러오거나 또는 html 파일에 직접 적어 줍니다.
//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 의 숫자를 적당히 조절하면서 반짝이게 할 수도 있습니다.
'Dev > HTML|CSS' 카테고리의 다른 글
HTML의 기본 샘플 코드 (0) | 2021.03.21 |
---|---|
[HTML] input 요소에 입력한 문자를 진하게 (볼드체)로 바꾸기 (0) | 2021.02.25 |
[HTML] textarea 입력된 문자수 확인 카운트하기 (0) | 2021.02.23 |
[HTML/CSS] html에 css를 적용시키는 방법 (0) | 2021.02.19 |
HTML input type="button" 으로 링크 버튼 만들기 (2) | 2016.07.07 |
html 개행 태그인 <br>은 닫는 태그 <br />를 꼭 사용해야 할까? (0) | 2016.06.15 |
일반 웹페이지를 모바일페이지에서 접속시 최적화로 보이게 하는 메타 태그 viewport (0) | 2014.04.03 |