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

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

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

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

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

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

Единственный файл, который вам нужен radiobox.min.css который должен идти прямо в голову вашего документа. Оттуда вы просто добавить простой класс для каждого переключателя в зависимости от желаемой анимации.

Вот фрагмент кода для “Boing” эффект:

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

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

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