Artículos sobre: Editor de páginas

Cómo instalar el EFECTO PULSE (pulsar) en un elemento

Para instalar el efecto de pulsar en algún elemento de tu página, sigue este paso a paso de abajo:


  1. Accede a tu editor de páginas;



  1. Haz clic en el ícono de engranaje ubicado en la esquina superior derecha de tu pantalla;



  1. Enseguida, selecciona la opción Javascript/Css;



  1. Haz clic en Adicionar código;



  1. Dale un nombre al código, clasifícalo como funcionamento e instala el código de abajo:



<style>

#e0000000 .c {

--pulsar: 0 0 0 0 #7fff00;
animation: pulsar 3s infinite;
-webkit-animation: pulsar 3s infinite;
-moz-animation: pulsar 3s infinite;
-o-animation: pulsar 3s infinite;
}

@-webkit-keyframes pulsar {
0% {
-webkit-box-shadow: var(--pulsar)
}

70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
}

100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
}
}

@-o-keyframes pulse {
0% {
-webkit-box-shadow: var(--pulsar)
}

70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
}

100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
}
}

@-ms-keyframes pulsar {
0% {
-webkit-box-shadow: var(--pulsar)
}

70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
}

100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
}
}

@-moz-keyframes pulsar {
0% {
-webkit-box-shadow: var(--pulsar)
}

70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
}

100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
}
}

@keyframes pulsar {
0% {
-webkit-box-shadow: var(--pulsar)
}

70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
}

100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
}
}

</style>


  1. Enseguida, necesitarás identificar el **ID del elemento **en el que se aplicará el efecto;


Si no sabes cómo identificar el ID de un elemento en GreatPages, haz clic aquí y mira nuestro tutorial.


  1. Después de eso, informa en el campo destacado abajo el código del color que te gustaría aplicar con el efecto de pulsar ;



Si no sabes cómo identificar el código de un determinado color, haz clic aquí y mira un sitio que te ayuda en este paso.


  1. Por último, haz clic en "Salvar".


¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte.

Actualizado el: 29/07/2026

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!