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. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
El Toast se usa para mostrar comentarios en vivo al usuario. La animación Toast in se usa para animar la tostada usando las clases modificadoras Toast–animateIn y Toast–animateOut .
Primer CSS Toast animación en clase:
- Toast–animateIn: esta clase se usa para animar el brindis desde abajo.
- Toast–animateOut: esta clase se usa para animar el brindis desde abajo.
Sintaxis:
<div class="Toast Toast--animateIn">
Content
</div>
Ejemplo 1: Este ejemplo demuestra el uso de la animación Primer CSS Toast al usar la clase Toast–animateIn .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Toast animation in </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> Primer CSS Toast animation in </h3> </div> <div class="d-flex flex-justify-center"> <div class="Toast Toast--animateIn"> <span class="Toast-icon"> <svg class="octicon" xmlns="https://www.geeksforgeeks.org/" viewBox="0 0 15 15" width="25" height="25"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> </span> <span class="Toast-content"> GeeksforGeeks Animate In </span> </div> </div> </body> </html>
Producción:
Primer CSS Toast animación
Ejemplo 2: Este ejemplo demuestra la animación Primer CSS Toast usando la clase Toast–animateOut .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Toast animation in</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> Primer CSS Toast animation in </h3> </div> <div class="d-flex flex-justify-center"> <div class="Toast Toast--animateOut"> <span class="Toast-icon"> <svg class="octicon" xmlns="https://www.geeksforgeeks.org/" viewBox="0 0 15 15" width="25" height="25"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> </span> <span class="Toast-content"> GeeksforGeeks Animate Out </span> </div> </div> </body> </html>
Producción:
Primer CSS Toast animación
Referencia: https://primer.style/css/components/toasts#toast-animation-in
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA