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. Hay diferentes tipos de animación que podemos hacer uso de ellos como el tipo de desplazamiento . La animación de desplazamiento se utiliza para elevar o escalar un elemento de la interfaz de usuario cuando el usuario se desplaza sobre él.
Primer clase de animación Hover CSS:
- .anim-hover-grow: agregue esta clase al elemento respectivo para implementar esta animación.
Sintaxis:
<div class=".anim-hover-grow">
...
</div>
Ejemplo: Este ejemplo demuestra el uso de la animación Hover de Primer CSS usando la clase anim-hover-grow . Puedes ver la salida en la imagen de abajo. Cuando el usuario se desplaza sobre la imagen, se amplía.
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 Hover Animation</u></h3><br /> </div> <div class="anim-hover-grow d-flex flex-justify-center"> <img style="width:150px;border:5px double;" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> </div> </body> </html>
Producción:
Primer CSS Hover Animación
Referencia: https://primer.style/css/utilities/animations#hover-animation
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA