Diseñe sus propios efectos de animación de Checkbox con Checkbox.css

En una publicación reciente, cubrí una biblioteca de animaciones divertidas para botones de radio personalizados, impulsado por CSS.

Esa biblioteca gratuita fue lanzada por 720kb y rápidamente vio una alternativa de seguimiento llamada Checkbox.css. Esto funciona de manera similar, excepto que Restaura y anima las casillas de verificación de HTML..

Esta biblioteca viene como un conjunto de bibliotecas con tres propósitos distintos:

1. Radiobox.css - animaciones de radio personalizadas
2. Casilla de verificación.css - animaciones de casilla personalizadas
3. Checked.css - Estilos y anima elementos seleccionados existentes (radios y casillas de verificación)

Todos estos son desarrollados por el mismo equipo y funcionan de manera similar. Pero necesitarás incluir cada biblioteca individualmente Si quieres conseguir los efectos completos..

Eche un vistazo al Checkbox.css GitHub para ver algunas de estas características y cómo funcionan. Por defecto, confían en Transformaciones 2D junto con transiciones CSS, dependiendo del soporte del navegador.

Ninguna de estas bibliotecas viene con métodos de respaldo de JS, por lo que realmente solo funciona para animaciones basadas en CSS. Sin embargo, un vistazo rápido a la página de demostración debe hacer que te sientas encantado de agregar estas animaciones a tu página..

El proceso no podría ser más sencillo y requiere poco o ningún conocimiento de codificación (aunque siempre es útil tener alguna).

Una vez que la hoja de estilo CSS esté en su página, simplemente agregue una clase a su casilla de verificación con el formato casilla de verificación-x donde el “X” representa cualquier animación que quieras. Por ejemplo, aquí está el código para el “saltar” efecto de animacion:

La mejor parte es cómo esta biblioteca puede Trabajar en conjunto con el formato del botón de radio., también. Definitivamente recomendaría la biblioteca Checked.css si quieres animar elementos seleccionados existentes.

No dejes que todas estas dependencias te asusten. Casi cualquier persona puede configurar la biblioteca Checkbox.css o cualquiera de las bibliotecas relacionadas, Todo desde cero con un poco de copia y pegado..

Y, si tiene preguntas o sugerencias para este paquete de bibliotecas de animación de entrada, intente enviar mensajes a los creadores a través de su sitio o en Twitter @ 720kb_.