WORDPRESS
Como hacer efecto Neón con elementor free, wordpress 95, tutorial o curso español.
En este tutorial de SYSPA SOCIAL aprenderemos como crear el efecto neón con elementor dentro de tu pagina web wordpress.
El efecto neón nunca pasa de moda y es uno de los mas buscados y utilizados. En este tutorial de wordpress veremos como hacer un efecto neón increíble, para tu pagina web wordpress.
Sin utilizar ningún plugin adicional podrás crear un efecto de movimiento, sombra y animación increíble.
Principales puntos del tutorial efecto neón con elementor para wordpress.
- Creamos una pagina web para contener al neón.
- Creamos el objeto al cual le aplicaremos el efecto neon.
- Aplicamos el primer código asociado al efecto.
- Aplicamos el resto del codigo.
- Probamos el efecto neon
- Mostramos como editar el efecto cambiando colores.
Código Utilizado
Texto al cual aplicamos efecto neón, pegarlo en el objeto elementor texto.
<span class="fast-flicker">Syspa</span>
<span class="flicker">Social</span>
Efecto neón.
<style>
@keyframes blink {
0%,
22%,
36%,
75% {
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
}
28%,
33% {
color: #ff65bd;
text-shadow: none;
}
82%,
97% {
color: #ff2483;
text-shadow: none;
}
}
.flicker {
animation: shine 2s forwards, blink 3s 2s infinite;
}
.fast-flicker {
animation: shine 2s forwards, blink 10s 1s infinite;
}
@keyframes shine {
0% {
color: #6b1839;
text-shadow: none;
}
100% {
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
}
}
@keyframes flicker {
from {
opacity: 1;
}
4% {
opacity: 0.9;
}
6% {
opacity: 0.85;
}
8% {
opacity: 0.95;
}
10% {
opacity: 0.9;
}
11% {
opacity: 0.922;
}
12% {
opacity: 0.9;
}
14% {
opacity: 0.95;
}
16% {
opacity: 0.98;
}
17% {
opacity: 0.9;
}
19% {
opacity: 0.93;
}
20% {
opacity: 0.99;
}
24% {
opacity: 1;
}
26% {
opacity: 0.94;
}
28% {
opacity: 0.98;
}
37% {
opacity: 0.93;
}
38% {
opacity: 0.5;
}
39% {
opacity: 0.96;
}
42% {
opacity: 1;
}
44% {
opacity: 0.97;
}
46% {
opacity: 0.94;
}
56% {
opacity: 0.9;
}
58% {
opacity: 0.9;
}
60% {
opacity: 0.99;
}
68% {
opacity: 1;
}
70% {
opacity: 0.9;
}
72% {
opacity: 0.95;
}
93% {
opacity: 0.93;
}
95% {
opacity: 0.95;
}
97% {
opacity: 0.93;
}
to {
opacity: 1;
}
}+B19
</style>
Videos relacionados con efecto neón con elementor para wordpress.
🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
Agregaremos un chat de whatsapp a tu pagina web wordpress de manera simple y gratis.
🖐️ como usar CSS personalizado con elementor free o gratis, wordpress 49 tutorial o curso español.
Aprenderemos como podemos utilizar CSS personalizado para toda la pagina wordpress, una clase o un objeto en particular, utilizando elementor free o gratis
🖐️ Selector de contenido con elementor gratis o free, wordpress 124 tutorial o curso español.
Veremos como crear un selector de contenido al seleccionar algún objeto, utilizando elementor gratis o free dentro de wordpress.
🖐️ 15 trucos o funcionalidades ocultas de elementor gratis, wordpress 121 tutorial o curso español
Aprenderemos 15 trucos o funcionalidades ocultas de elementor para que sigas mejorando tu pagina web wordpress.
Tenemos Cientos de tutoriales Wordrpess
Inicia aquí gratis !
Accede al listado completo de tutoriales wordpress.