html - ejemplo - blink tag

Alternativa para<blink>

Question

La etiqueta <blink> nunca fue un estándar oficial, y ahora está completamente abandonada por todos los navegadores.

¿Hay alguna forma compatible con los estándares de hacer que el texto parpadee?

Answer 1

Aquí hay un código que sustituirá a la etiqueta de parpadeo

<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>

Answer 2

Aquí hay un componente web que se adapta a sus necesidades: blink-element .
Simplemente puede envolver su contenido en <blink-element> .

<blink-element>
<!-- Blinking content goes here -->
</blink-element>

Answer 3

El elemento de blink está siendo abandonado por los navegadores: Firefox lo admitió hasta la versión 22 y Opera hasta la versión 12.

El CR de HTML5, que es el primer borrador de especificación que menciona el blink , lo declara como "obsoleto" pero describe (en la sección Rendering ) su "representación esperada" con la regla

blink { text-decoration: blink; }

y recomienda que el elemento sea reemplazado por el uso de CSS. En realidad, existen varias formas alternativas de emular el blink en CSS y JavaScript, pero la regla mencionada es la más directa: el valor de blink para text-decoration de text-decoration se definió específicamente para proporcionar una contraparte de CSS al elemento de blink . Sin embargo, su soporte parece ser tan limitado como para el elemento de blink .

Si realmente desea hacer que el contenido parpadee de forma cruzada en el navegador, puede utilizar, por ejemplo, un código JavaScript simple que cambia el contenido a invisible, de nuevo a visible, etc. de manera cronometrada. Para obtener mejores resultados, puedes usar animaciones CSS, con un soporte de navegador algo más limitado.

Answer 4

No no hay. Wikipedia tiene un buen artículo sobre esto y proporciona una alternativa utilizando JavaScript y CSS: http://en.wikipedia.org/wiki/Blink_element

Answer 5

No, no hay en HTML. Hay una buena razón por la que los desarrolladores decidieron salir de su camino para eliminar el soporte para un elemento cuya implementación, de otro modo, estaba intacta durante más de una década.

Dicho esto ... podrías emularlo usando una animación CSS , pero si yo fuera tú, no me arriesgaría a que las animaciones CSS sean eliminadas debido a que se abusa de esta manera :)

Answer 6

Por favor prueba este y te garantizo que funcionará

 <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;

Luego pon esto a continuación:

<blink><center> Your text here </blink></div>

Answer 7

Si desea volver a habilitar la etiqueta de parpadeo para su propia navegación, puede instalar esta sencilla extensión de Chrome que escribí: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension . Solo oculta y muestra todas las etiquetas <blink> en cada página usando setInterval.

Answer 8

Un pequeño fragmento de código javascript para imitar el parpadeo, sin necesidad de css, incluso

<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>

Answer 9

.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>