Usamos el texto parpadeante cuando queremos llamar la atención de la audiencia. Ayuda mucho a llamar la atención del usuario cuando tenemos una información importante o una nueva actualización sobre cualquier cosa para el usuario. Usamos el texto parpadeante, por lo que cuando los usuarios usan los sitios web o pasamos por cualquier página donde él/ella desee obtener la actualización sin perder su tiempo en busca, él/ella recibe la actualización o información importante fácilmente si hay un parpadeo texto en esa página. Como podemos ver en los sitios web de compras, cuando hay alguna venta o algún descuento o algo nuevo en ese sitio web, crean esta información en el formulario de texto parpadeante. Hacer que el texto parpadee atrapará fácilmente la atención del usuario hacia esa información. El texto parpadeante es algo que se desvanece lentamente durante unos segundos y luego regresa a su texto original. Explicaremos cómo agregar el texto parpadeante usando CSS en este tutorial.

Ejemplo 1

Para que nuestro texto parpadee, tenemos que crear un archivo HTML y escribir algún texto en él. Agregamos el efecto parpadeante en este texto utilizando las propiedades de CSS.

En el código HTML, escribimos una sola línea dentro de "div" como encabezando 2 "H2" y aplicamos las propiedades de CSS para que este texto sea un texto parpadeante. Vea el código CSS a continuación y sabrá cómo agregar el efecto parpadeante utilizando las propiedades CSS.

Código CSS:

Establecimos el cuerpo "margen" y "relleno" en "0". Luego usamos la posición central absoluta en "div". Establecemos la propiedad de "posición" en "Absoluto". Establecimos la "superior" y la "izquierda" en "50%". Luego viene la propiedad "Translate-Translate" del CSS que transforma el texto a la mitad de su ancho y altura. Se usa para revertir el texto al "50%" a la mitad de su ancho y "50%" a la mitad de su altura.

Después de esto, utilizamos las propiedades de estilo de CSS para cambiar el estilo del "H2". Establecemos el tamaño de fuente de "H2" en "5EM" y la "Fuente-Familia" a "Serif". El color que seleccionamos para esto es el color "verde" y el código para esto es "#008000". Este encabezado está alineado en el "centro". El elemento principal es agregar la propiedad de "animación" en este "H2". Esta propiedad de "animación" está configurada para animar para "2.0sec "y" Infinito lineal ". Se usa el infinito lineal, por lo que esta animación comienza lentamente y luego se transforma un poco más rápido. El selector "@KeyFrame" se utiliza para proporcionar el texto parpadeante junto con el valor de opacidad. Establecemos el valor de opacidad al final del código CSS.

Producción:

El texto se muestra en el siguiente video. Cuando ejecute el código anterior proporcionado, verá que el texto que ha escrito en su archivo HTML está parpadeando. Reproduce este video y puedes ver que el texto está parpadeando.

Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Usar las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.

Ejemplo #2

Vamos a demostrar otro código aquí para que aprenda fácilmente este concepto de texto parpadeante en CSS.

Usamos la clase "Span" aquí y establecemos el nombre en "Parpadeando". Escribimos una línea simple aquí que es "¿Estoy parpadeando" y usamos el efecto parpadeante en este texto utilizando la propiedad de animación CSS?.

Código CSS:

Primero, establecemos el texto en la posición central absoluta, lo que significa que el texto aparecerá en el centro de la pantalla. Aquí, puede ver que la "posición" es "absoluta". El "superior" y "inferior" se establece en "50%" y la propiedad "transformar-tradato" se establece en "-50%, -50%". Usamos el nombre de clase de "Span" que es "parpadeando". Y aplique el estilo y el efecto de "animación" al texto. Establecimos el "tamaño de fuente" de este texto en "4em". La "familia de fuentes" que usamos para este texto está configurado en "Argelino".

El color del texto está establecido en "verde". La alineación del texto se establece en el "centro" de la pantalla. La propiedad de "animación" aplica el efecto parpadeante al texto. El texto parpadeante anima para "2.0s "y" Infinito ". El "@Keyframes" es dar la opacidad del color al texto parpadeante. Primero, configúrelo en "0%" y "49%" para el color "negro". El "60%" se establece en el color transparente, "99%" transparente y "100%" negro. La salida se muestra en el siguiente video.

Producción:

En este video dado, notará que el texto parpadea. Esta salida dada se representa en el navegador. El texto parpadeante recibe la atención del usuario.

Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Usar las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.

Ejemplo #3

En este ejemplo, escribimos los párrafos en el código HTML y usamos la propiedad de "animación" en estos párrafos para que los párrafos parpadeemos cuando obtenemos la salida.

Aquí tenemos el encabezado 1 "

"Donde escribimos el encabezado que queremos mostrar. Luego, creamos una clase llamada "A1" de "P" y escribimos un párrafo en él. Además, creamos otro párrafo usando el nombre de clase "A2" de otra "P". Damos estos nombres a la clase "P" para que podamos usarlos en el código CSS para el estilo.

Código CSS:

Primero, aplicamos el estilo al encabezado. Usamos el color "naranja" para la fuente o el texto escrito dentro del encabezado. El encabezado está "alineado" con el "centro" de la pantalla de salida. La familia del texto o la fuente está configurada como "argelina" para que el encabezado se mostrará en estilo "argelino". Animamos el texto para que los párrafos parpadeen en la pantalla. Usamos la misma propiedad que usamos en nuestro ejemplo anterior para que el texto parpadee. Esta propiedad es la propiedad de "animación". Anima o parpadea para "2s" (dos segundos).

El tamaño del texto en el párrafo es "25px". Estos párrafos están alineados con el "centro". El texto del párrafo está establecido en "cursiva". Nuevamente, tenemos el "@Keyframe" que explicamos en nuestros ejemplos anteriores. Mire el video dado para la salida de este ejemplo.

Producción:

Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Usar las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.

En el video anterior, puede ver que el texto del encabezado no está parpadeando porque no usamos el efecto parpadeante o la propiedad de animación en el encabezado. Es por eso que el texto de encabezado está en forma de. Pero los párrafos debajo del encabezado y el estilo de estos párrafos son diferentes del encabezado.

Conclusión

En este tutorial, explicamos el efecto parpadeante en CSS y aplicamos este efecto parpadeante a nuestro texto utilizando la propiedad de "animación" CSS. Este texto parpadeante se usa para llamar la atención del usuario. Puede notar que cuando el texto parpadea, nuestros ojos se mueven automáticamente hacia ese texto. En este tutorial, proporcionamos los videos del texto parpadeante. Después de ver estas salidas de video, comprenderá qué significa Blinks. Aprenderá cómo parpadea el texto y cómo usamos la propiedad de "animación", y establecerá el tiempo de parpadeo en el texto para que el texto parpadee después de un estudio exhaustivo de este tutorial.