Cómo hacer texto parpadeante/intermitente con CSS
Mientras desarrollan una aplicación web, los desarrolladores siempre tienden a implementar las propiedades de estilo CSS de manera efectiva. CSS proporciona varias propiedades de estilo, como color, posición, alineaciones y muchas más. Además de estas propiedades, nos permite establecer la acción de animación en elementos. Para este propósito, el "@KeyframesLas reglas se utilizarán.
Este artículo demostrará cómo podemos hacer texto parpadeante/intermitente con CSS.
Cómo hacer texto parpadeante con CSS?
Para hacer que el texto parpadee, el CSS "opacidad"Propiedad con el"@Keyframes"La regla se puede aplicar. Consulte los ejemplos a continuación.
Ejemplo 1: hacer texto parpadeante
En HTML, agregue un ""Elemento y asignarlo un"estilo parpadeo" clase. A continuación, agregue un " Linuxhint Avancemos para diseñar los elementos HTML. Estilo "estilo Blink-Style" Div El CSS "fondo"La propiedad se aplica al elemento Div con la clase"estilo parpadeo". Elemento de estilo "H3" El html " Aplicar la animación de "@Keyframe" a la animación "-Text" El nombre de la animación "texto de parpadeo"Se especifica en la propiedad de animación. El "@Keyframe"La regla se agrega antes del nombre de la animación que significa el comportamiento de animación a diferentes intervalos como se mencionan a continuación: Producción Ejemplo 2: hacer múltiples texto parpadeante Para hacer múltiples textos parpadeantes en el HTML, siga los pasos dados a continuación: "El elemento se le asigna una clase"brillante". Centellea centellea Estrellita * Ahora, mira la sección CSS para diseñar el HTML " Estilo "Text-Div" Div El ".texto de texto"Se usa para acceder al elemento. Dentro de los soportes rizados, las siguientes propiedades de CSS se aplican al ".texto-div ”: Clase de estilo "flashing" de estilo El ".brillante"Se usa para acceder al HTML etiquetas. Las siguientes propiedades se implementan en esta clase: Aplicar la animación de "@Keyframe" a la animación "estilo flashing" Ajuste el comportamiento de "estilo intermitente"Animación usando el"@Keyframe" normas. Al comienzo de la animación, la opacidad del texto será 0, lo que indica el nivel de transparencia completo de los elementos. Para hacer la animación en el segundo ""Elemento ligeramente diferente, la clase"uno"Se declara con los siguientes estilos de animación: Clase de estilo "One" Producción Hemos aprendido efectivamente cómo hacer el texto parpadeante utilizando diferentes propiedades de estilo CSS. Conclusión En HTML, se utilizan varias propiedades CSS para hacer que el estilo de texto parpadee. El "animación" y "opacidad"Las propiedades se definen comúnmente en este contexto. Para ajustar el comportamiento parpadeante, el "@Keyframe"La regla se declara para una propiedad de animación. Este artículo ha explicado cómo hacer texto parpadeante o intermitente en HTML usando CSS. .estilo parpadeo
Antecedentes: RGB (0, 0, 0);H3
Text-Align: Center;
Font-Family: Verdana;
Color: #FFC310;
Animación: Text 1 de Blink 1.9s Infinito lineal;
tamaño de fuente: 6em;
@Keyframes Blink-Text
0%
Opacidad: 0;
50%
Opacidad: 1;
100%
Opacidad: 0;
.texto-div
Ancho: 400px;
margen: auto;
Color de fondo: RGB (42, 49, 49);
relleno: 8px;
.parpadeante
color amarillo;
tamaño de fuente: 40px;
Font-Family: cursiva;
Font-Weight: Bold;
Animación: estilo flashing 0.6s lineal infinito;
@Keyframes estilo flashing
0%
Opacidad: 0;.uno
Animación: One 1s Lineal Infinite;
@Keyframes One
50%
Opacidad: 0;