Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Las animaciones son una herramienta importante para atraer a los usuarios a una parte específica de la página web. Ayuda a señalar algo importante para los consumidores. Existen diferentes tipos de animación que podemos hacer uso del tipo pulso . La animación de pulso se utiliza para iluminar hacia arriba y hacia abajo el elemento de la interfaz de usuario de forma continua.
Clase utilizada de animación de pulso:
- . anim-pulse: agregue esta clase al elemento respectivo para implementar la animación de pulso.
Sintaxis:
<div class=".anim-pulse"> ... </div>
Ejemplo: Este ejemplo demuestra el uso de la animación Primer CSS Pulse utilizando la clase anim-pulse .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Pulse Animation</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Pulse Animation</u></h3><br/> </div> <div class="anim-pulse d-flex flex-justify-center"> <img src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> </div> </body> </html>
Producción:
Cartilla CSS Pulso Animación
Referencia: https://primer.style/css/utilities/animations#pulse
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA