En este artículo aprenderemos sobre las alternativas de la etiqueta de parpadeo de HTML. La etiqueta parpadeante no tiene ninguna etiqueta HTML alternativa, pero se puede crear el mismo efecto alternativamente con la ayuda de CSS
Ejemplo:
En este ejemplo, usaremos animaciones CSS para obtener el efecto de parpadeo.
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Geeksforgeeks</title>
<style type="text/css">
/* Minor Styling optional */
.blinky{
margin: auto;
width: 200px;
height: 200px;
background: cyan;
text-align: center;
font-size: 24px;
/* for support in Safari 4.0 - 8.0 */
-webkit-animation:
1.5s linear infinite blinky-effect;
animation: 1.5s linear infinite blinky-effect;
}
/* for support in Safari 4.0 - 8.0 */
@-webkit-keyframes blinky-effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
@keyframes blinky-effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
</style>
</head>
<body>
<div class="blinky">
This div is going to blink
</div>
</body>
</html>
Producción:
Blink-Effect utilizando animaciones CSS.
Ventajas del enfoque CSS sobre la etiqueta parpadeante
| El enfoque de la etiqueta parpadeante | El enfoque de las animaciones CSS |
|---|---|
| No es compatible con la mayoría de los navegadores. | Compatible con todos los navegadores modernos. |
| Mala práctica de diseño. | Práctica de diseño estándar. |
| No flexible. | Completamente flexible y se puede personalizar según los requisitos. |
| Reduce la accesibilidad del sitio web | Sin efecto sobre la accesibilidad si se usa correctamente |
En general, la etiqueta de parpadeo no debe usarse, ya que es una característica obsoleta y puede eliminarse en futuras actualizaciones. Para obtener más información sobre las animaciones CSS, consulte este artículo: Animaciones CSS
Publicación traducida automáticamente
Artículo escrito por haridarshanc y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA