Създайте забавни анимирани радио бутони с Radiobox.css

Най- по подразбиране HTML5 радио бутони са доста скучни. Има начини за това персонализирайте ги използвайки CSS3, но повечето техники фокусирайте се само върху външния вид.

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

Тази библиотека е напълно безплатно и отворен код, на GitHub за изтегляне. С тази библиотека на CSS можете да избирате от повече от 12 различни анимации които се прилагат за радио бутоните.

Без персонализирани CSS стилове, те ще продължат изглежда като нормални радио входове. Но когато потребителят кликне, за да избере бутон, ще го направи получи луд анимационен ефект. Можеш да видиш живи примери на главната страница на Radiobox, която показва всеки стил до неговото име.

Можете да инсталирате Radiobox направо от npm или bower, или дори да изтеглите файловете локално на вашата машина. GitHub хоства всички свои файлове в CDN ако искате да играете, без да изтегляте нищо.

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

Ето едно кодов фрагмент за “Боинг” ефект:

Обърнете внимание на “Боинг” анимацията има собствен CSS файл Наречен boing.min.css. Това трябва да бъде включена ако планирате да използвате този ефект на страницата.

Когато изтегляте Radiobox, трябва получите демо директория с живи демонстрации за всички тези ефекти. Можете просто копирайте / поставете кода директно към страницата си, за да работи без безпроблемно.

За пълна документация, разгледайте главно репо заедно с демонстрационен сайт на живо. Ако искате да се свържете с създателите, можете да изпратите имейл от 720kb уебсайт или съобщение чрез Twitter @ 720kb_.