CSSだけで文字だけでなく、画像やリンクを点滅させることができます。
HTML
|
1 2 3 |
<p class="blinking">点滅</p> <img src="sample.png" class="blinking"> <a href="#" class="blinking">点滅</a> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.blinking{ -webkit-animation:blink 1.0s ease-in-out infinite alternate; -moz-animation:blink 1.0s ease-in-out infinite alternate; animation:blink 1.0s 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;} } |