8 hamburguesas alternar animaciones en HTML puro/CSS

Vista prévia

Descripción

Una colección de 8 impresionantes animaciones de alternancia creadas para botones de hamburguesa de su sistema de navegación móvil & de escritorio.

Escrito en HTML puro y CSS/CSS3.

Available animations:

1. SQUEEZE
2. SLIDE
3. SLIP
4. ROTATE
5. ARROW
6. ARROW RIGHT
7. ARROW UP
8. ARROW DOWN

Funcionamiento

Cargue una animación de su elección en el documento.

<link href="Burger/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerArrow/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerRotate/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerSlide/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerSlip/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerSqueeze/dist/styles.css" rel="stylesheet" type="text/css">

El HTML de ejemplo para crear una animación de alternancia rotar hamburguesa. Todas las clases de animación posibles:

• Burger-Arrow
• Burger-Rotate
• Burger-Slide
• Burger-slip
• Burger-Squeeze

<div class="burger Burger-Rotate">

<div class="burger-lines"></div>
</div>

Cambie la dirección de la animación.

• Burger-Left (por defecto)
• Burger-Right
• Burger-up
• Burger-Down

<div class="burger Burger-Arrow Burger-Down">

<div class="burger-lines"></div>
</div>

Configure el estado para que se abra en la carga de página.

<div class="burger Burger-Rotate open">

<div class="burger-lines"></div>
</div>