Crea divertidos botones de radio animados con Radiobox.css

los botones de radio predeterminados de HTML5 son bastante aburridos Hay maneras de personalizarlos Usando CSS3, pero la mayoría de las técnicas centrarse solo en la apariencia.

Radiobox.css se centra en miradas y estilo Añadiendo animaciones CSS3 personalizadas a las entradas de radio..

Esta biblioteca es totalmente libre y fuente abierta, disponible en GitHub para descargar. Con esta biblioteca CSS, puede elegir entre Más de 12 animaciones diferentes. que se aplican a los botones de radio.

Sin estilos CSS personalizados, todavía parecen entradas de radio normales. Pero cuando el usuario hace clic para seleccionar un botón, obtener un efecto de animación loco. Puedes ver ejemplos vivos en la página principal de Radiobox que muestra cada estilo junto a su nombre.

Puedes instalar Radiobox directamente de npm o bower, o incluso descargar los archivos localmente a su máquina. GitHub alberga todos sus archivos en un CDN Si quieres jugar sin descargar nada..

El único archivo que necesitas es radiobox.min.css que debería ir directamente en la cabeza de su documento. A partir de ahí, solo agrega una clase simple a cada botón de radio dependiendo de la animación que desee.

Aquí está un fragmento de código Para el “boing” efecto:

Nota la “boing” la animación tiene su propio archivo CSS llamado boing.min.css. Esta tiene que ser incluido Si planeas usar ese efecto en la página..

Cuando descargues Radiobox deberías obtener un directorio de demostración con Demostraciones en vivo de todos estos efectos.. Usted puede simplemente copiar / pegar el código directamente a tu página para que funcione sin problemas.

por documentación completa, revisar la repo principal junto con sitio de demostración en vivo. Si quieres contactar con los creadores puedes enviar un correo electrónico desde Sitio web de 720kb o mensaje vía Twitter @ 720kb_.