Generador de animaciones de pulso y latido en CSS
Crea animaciones CSS de latido, pulso o anillo de resplandor y copia el código
Herramienta para crear con unos pocos clics animaciones de pulso en CSS para botones e iconos. Elige entre tres preajustes —latido de corazón, pulso básico y anillo de resplandor—, ajusta la escala, la velocidad y la función de aceleración, comprueba el resultado en la vista previa y copia el CSS terminado. Todos los cálculos se hacen solo en el navegador y no se envía ningún dato a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige el preajuste que quieras entre latido de corazón, pulso básico y anillo de resplandor.
- Regula la intensidad y la rapidez de la animación con los deslizadores de escala (Scale) y velocidad (Speed).
- Selecciona la función de aceleración (Timing) entre ease, linear, cubic-bezier y otras para afinar la sensación del movimiento.
- Comprueba el resultado en la vista previa y copia el código @keyframes terminado con el botón «Copiar CSS».
Preguntas frecuentes
- ¿Puedo usar el CSS generado tal cual en mi proyecto?
- Sí. Pega los @keyframes y la clase .pulsing-element copiados y aplica la clase al elemento que quieras: funcionará al instante.
- ¿Por qué no puedo ajustar la escala en el efecto de anillo de resplandor?
- El preajuste de anillo de resplandor (Ripple) está diseñado en torno a un box-shadow que se expande, por lo que en lugar de la escala solo permite ajustar la velocidad y la función de aceleración.
- ¿Cómo consigue el preajuste de latido esa sensación de doble pulsación?
- Coloca valores de scale distintos en los tramos 0%, 14%, 28%, 42%, 70% y 100%, creando unos keyframes de doble latido: uno corto y otro más amplio.