Створити забавні анімовані кнопки радіо з Radiobox.css

The за замовчуванням перемикачі HTML5 досить нудні. Є способи налаштувати їх за допомогою CSS3, але більшість методів зосередитися тільки на поглядах.

Radiobox.css зосереджено на виглядає і стиль додавання користувацьких анімацій CSS3 до радіо входів.

Ця бібліотека є абсолютно безкоштовно і відкрите джерело, на GitHub для завантаження. За допомогою цієї бібліотеки CSS ви можете вибрати з більше 12 різних анімацій , які застосовуються до перемикачів.

Без спеціальних стилів CSS вони все одно будуть виглядають як звичайні радіо входи. Але коли користувач натискає, щоб вибрати кнопку вони будуть отримати божевільний ефект анімації. Ти можеш бачити живі приклади на головній сторінці радіоканалу, яка демонструє кожний стиль поряд з його назвою.

Ви можете встановити Radiobox прямо з npm або bower, або навіть завантажувати файли локально на вашу машину. GitHub зберігає всі свої файли в CDN якщо ви хочете грати, не завантажуючи нічого.

Єдиний потрібний файл radiobox.min.css які повинні йти у голову документа. Звідти ви просто додайте простий клас на кожну перемикач залежно від потрібної анімації.

Ось a фрагмент коду для “boing” ефект:

Зверніть увагу на “boing” анімація власний файл CSS називається boing.min.css. Це має бути включено якщо ви плануєте використовувати цей ефект на сторінці.

При завантаженні Radiobox вам слід отримати демо-каталог с живі демонстрації для всіх цих ефектів. Можна просто копіюйте / вставте код безпосередньо на вашу сторінку, щоб вона працювала без проблем.

Для повна документація, перевірте головний репо разом з демонстраційний сайт. Якщо ви хочете зв'язатися з творцями, ви можете надіслати електронний лист від користувача Сайт 720kb або повідомлення через Twitter @ 720kb_.