Come rendere il testo lampeggiante in HTML

Ci sono un paio di modi per farlo.

In passato abbiamo usato lo stile text-decoration per farlo

Testo lampeggiante

ma non tutti i browser lo supportano più (e per una buona ragione).

Ora c'è un modo più semplice per far lampeggiare le cose.
Testo lampeggiante
Ma anche questo non funziona su tutti i browser.

Se volete creare un testo (o un elemento) lampeggiante che funzioni su tutti (o almeno sulla maggior parte) i browser, dovete usare la magia CSS o JavaScript.

Blinking text

Then you need to add CSS

1. .blink { 
2. -webkit-animation-name: blinker; 
3. -webkit-animation-duration: 1s; 
4. -webkit-animation-timing-function: linear; 
5. -webkit-animation-iteration-count: infinite; 
6.  
7. -moz-animation-name: blinker; 
8. -moz-animation-duration: 1s; 
9. -moz-animation-timing-function: linear; 
10. -moz-animation-iteration-count: infinite; 
11.  
12. animation-name: blinker; 
13. animation-duration: 1s; 
14. animation-timing-function: linear; 
15. animation-iteration-count: infinite; 
16. } 
17.  
18. @-moz-keyframes blinker {  
19. 0% { opacity: 1.0; } 
20. 50% { opacity: 0.0; } 
21. 100% { opacity: 1.0; } 
22. } 
23.  
24. @-webkit-keyframes blinker {  
25. 0% { opacity: 1.0; } 
26. 50% { opacity: 0.0; } 
27. 100% { opacity: 1.0; } 
28. } 
29.  
30. @keyframes blinker {  
31. 0% { opacity: 1.0; } 
32. 50% { opacity: 0.0; } 
33. 100% { opacity: 1.0; } 
34. } 

That's... a lot of CSS for so little job don't you think. You can try that at JSFiddle

If you have jQuery enabled in your file, you could use a little jQuery trick called fading.

1. function blinker() { 
2. $('.blink').fadeOut(500).fadeIn(500); 
3. } 
4.  
5. setInterval(blinker, 1000); 

That is available at JSFiddle too.