Alternativa para
9 answers
.blink_text {
animation:1s blinker linear infinite;
-webkit-animation:1s blinker linear infinite;
-moz-animation:1s blinker linear infinite;
color: red;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<span class="blink_text">India's Largest portal</span>
O elemento blink
está a ser abandonado pelos navegadores: o Firefox suportou-o até à versão 22, e o Opera até à versão 12.
O HTML5 CR, que é o primeiro rascunho de especificação que menciona blink
, declara-o "obsoleto", mas descreve (na secçãorenderização ) a sua "representação esperada" com a regra
blink { text-decoration: blink; }
E recomenda que o elemento seja substituído pela utilização de CSS. Existem na verdade várias formas alternativas de emular blink
em CSS e JavaScript, mas a regra mencionada é a mais simples: o valor blink
para text-decoration
foi definido especificamente para fornecer uma contraparte CSS ao elemento blink
. No entanto, o apoio a ele parece ser tão limitado quanto para o elemento blink
.
Se realmente quiser fazer o conteúdo piscar de forma cruzada, pode usar, por exemplo, um código JavaScript simples que muda o conteúdo para invisível, de volta para visível, etc. de uma forma cronometrada. Para melhores resultados você poderia usar animações CSS, com um pouco suporte de navegador mais limitado.
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
Depois põe isto abaixo:
<blink><center> Your text here </blink></div>
Se está a tentar activar de novo a marca blink para a sua própria navegação, pode instalar esta extensão cromática simples que escrevi: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension . só esconde e mostra todas as marcas
Um pequeno excerto de javascript para imitar o piscar, sem necessidade de css sequer
<span id="lastDateBlinker">
Last Date for Participation : 30th July 2014
</span>
<script type="text/javascript">
function blinkLastDateSpan() {
if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
$("#lastDateBlinker").css("visibility", "visible");
setTimeout(blinkLastDateSpan, 200);
} else {
$("#lastDateBlinker").css("visibility", "hidden");
setTimeout(blinkLastDateSpan, 200);
}
}
blinkLastDateSpan();
</script>
<p id="blink">This text will blink!</p>
<script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
document.getElementById("blink").style.color = "white";
setTimeout(blackFunc,whitetime);
}
function blackFunc(){
document.getElementById("blink").style.color = "black";
setTimeout(whiteFunc,blacktime);
}
</script>
Aqui está um componente web que se encaixa na sua necessidade: blink-element .
Pode simplesmente embrulhar o seu conteúdo em <blink-element>
.
<blink-element>
<!-- Blinking content goes here -->
</blink-element>