✅Truco CSS: Efecto Neón con Animación Intermitente

Este código CSS proporciona un efecto visual atractivo para los elementos que tienen las clases .menu-item-84 y .menu-item-85 mediante una animación de neón. La animación, definida con el nombre neonefecto usando @keyframes, simula el resplandor intermitente característico de los letreros de neón.

¿Qué son los @Keyframes?

En el contexto de un blog o sitio web, los keyframes son una parte esencial de las animaciones CSS que permiten especificar cómo cambian los estilos a lo largo del tiempo. La propiedad @keyframes se utiliza para definir estos cambios a través de una serie de fotogramas clave (keyframes) que representan diferentes estados de la animación en momentos específicos.

En términos sencillos, los keyframes definen la evolución de un estilo desde un estado inicial hasta un estado final durante la duración de una animación. Esto puede ser útil en un blog para crear efectos visuales atractivos, resaltar ciertos elementos o mejorar la experiencia del usuario.

Por ejemplo, podrías utilizar keyframes para:

1. Resaltar un Título:
   • Hacer que el título de una entrada destaque mediante un cambio de color o tamaño al pasar el mouse sobre él.
2. Animar Imágenes:
   • Agregar animaciones suaves a las imágenes de tus entradas para hacer que se desvanezcan, cambien de tamaño o realicen otros efectos visuales.
3. Transiciones en Elementos Específicos:
   • Aplicar transiciones o animaciones a elementos específicos, como botones, para mejorar la interactividad y destacar llamadas a la acción.
4. Efectos al Desplazarse:
   • Crear efectos visuales a medida que el usuario desplaza hacia abajo en una entrada, como hacer que los elementos aparezcan gradualmente.

Al aplicar la animación del siguiente código CSS, los elementos con las clases mencionadas experimentarán un cambio en la sombra del texto. Al principio, no tienen sombra, pero en la mitad de la animación, obtienen un vibrante resplandor verde similar al de un letrero de neón. Este resplandor desaparece nuevamente al finalizar la animación, creando un ciclo continuo.

Este efecto de neón puede ser una opción visualmente atractiva para resaltar ciertos elementos en una página web, como menús, botones o encabezados. Su aplicación puede mejorar la experiencia del usuario al llamar la atención sobre elementos específicos de manera atractiva y dinámica. Este tipo de diseño se adapta especialmente bien a sitios web modernos que buscan una estética llamativa y contemporánea.

El siguiente código tienes que agregarlo en el style.css de tu tema hijo o en Apariencia – Personalizar – CSS Adicional.

@keyframes neonefecto {
    50% {
        text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    }
}

.menu-item-84, .menu-item-85 {
    animation: neonefecto 1s infinite;
}
Lenguaje del código: CSS (css)

Entendiendo el Código

Este código CSS define una animación denominada neonefecto mediante el uso de @keyframes, un mecanismo que permite especificar cómo cambian las propiedades de estilo a lo largo de una animación.

• Mitad (50%): Aquí se define un efecto de neón simulado mediante el uso de la propiedad text-shadow. En este caso, se aplican tres capas de sombras con diferentes radios de desenfoque y un color verde específico (#00ff00). Este keyframe representa la fase intermedia de la animación.

La propiedad text-shadow en CSS se utiliza para agregar sombras al texto. En el código proporcionado:

• 0 0 10px #00ff00: Este es el primer conjunto de sombras. Aquí, 0 0 indica que la sombra no se desplaza ni horizontal ni verticalmente desde el texto. 10px es el radio de desenfoque de la sombra, lo que significa que la sombra se difuminará en un radio de 10 píxeles. #00ff00 es el color de la sombra, en este caso, un verde brillante.
• ,: Coma separa conjuntos de sombras. En este caso, se están aplicando múltiples sombras para lograr un efecto más complejo.
• 0 0 20px #00ff00: Este es el segundo conjunto de sombras. Al igual que el primero, tiene un desplazamiento nulo (0 0), un radio de desenfoque más grande (20px), y el mismo color verde brillante (#00ff00).
• ,: Otra coma separa este conjunto del siguiente.
• 0 0 30px #00ff00: Este es el tercer conjunto de sombras, y tiene un radio de desenfoque aún mayor.
• En resumen, el conjunto text-shadow aplica tres sombras al texto, creando así un efecto de neón. Cada sombra contribuye a la apariencia general, con diferentes radios de desenfoque para dar una sensación de resplandor difuminado. Este efecto de neón es parte de la animación más amplia y se activa durante el 50% de la duración total de la animación, como se define en el keyframe correspondiente.

Posteriormente, esta animación se asigna a elementos con las clases .menu-item-84 y .menu-item-85. La duración de la animación es de 1 segundo (1s), y se configura para repetirse infinitamente (infinite). Como resultado, los elementos con estas clases experimentarán un efecto de neón que se repetirá en un bucle constante, proporcionando un aspecto dinámico y llamativo. Este enfoque, comúnmente utilizado en diseño web, permite crear transiciones suaves y efectos visuales atractivos mediante la especificación detallada de los cambios de estilo a lo largo del tiempo.

Nos vemos en el siguiente tutorial. Un saludo.