Создавайте забавные анимированные радио кнопки с Radiobox.css

Стандартные переключатели HTML5 довольно скучны. Есть способы настроить их с помощью CSS3, но большинство методов фокусируются только на внешнем виде.

Radiobox.css фокусируется на внешности а также стиль добавления пользовательских CSS3-анимаций для радиовходов.

Эта библиотека абсолютно бесплатна и доступна с открытым исходным кодом. на GitHub скачивать. С помощью этой библиотеки CSS вы можете выбирать из более чем 12 различных анимаций, которые применяются к переключателям.

Читайте также: Дизайн пользовательского интерфейса: настройка флажков и кнопок радио с CSS3

Без пользовательских стилей CSS они все равно будут выглядеть как обычные радиовходы. Но когда пользователь нажимает кнопку, чтобы выбрать кнопку, он получает сумасшедший эффект анимации. Вы можете увидеть живые примеры на главная страница Радиобокса который демонстрирует каждый стиль рядом с его именем.

Вы можете установить Radiobox прямо с npm или bower, или даже загрузить файлы локально на свой компьютер. GitHub хранит все свои файлы в CDN если вы хотите поиграть без загрузки чего-либо.
Единственный файл, который вам нужен, это radiobox.min.css, который должен находиться прямо в заголовке документа. Оттуда вы просто добавляете простой класс к каждой радиокнопке в зависимости от желаемой анимации.

Вот фрагмент кода для эффекта «boing»:

Обратите внимание, что анимация «boing» имеет собственный CSS-файл с именем boing.min.css. Это должно быть включено, если вы планируете использовать этот эффект на странице.

При загрузке Radiobox вы должны получить демонстрационный каталог с живыми демонстрациями для всех этих эффектов. Вы можете просто скопировать / вставить код прямо на свою страницу, чтобы он работал без проблем.

Для полной документации, проверьте основной репо вместе с живой демо-сайт, Если вы хотите связаться с создателями, вы можете отправить электронное письмо от Веб-сайт 720kb или сообщение через Twitter @ 720kb_,

Читайте также: типы ввода форм HTML5: дата, цвет и диапазон

            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>