Primer CSS Hover Animación

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *