Creați distractiv butoane radio animate cu Radiobox.css

implicite butoane radio HTML5 sunt destul de plictisitoare. Există modalități de a personalizați-le folosind CSS3, dar majoritatea tehnicilor se concentreze doar pe aspect.

Radiobox.css se concentrează pe arată și stil adăugând animații personalizate CSS3 la intrările radio.

Această bibliotecă este complet gratuit și sursa deschisa, disponibil pe GitHub pentru descărcare. Cu această bibliotecă CSS puteți alege de la mai mult de 12 animații diferite care se aplică butoanelor radio.

Fără stiluri CSS personalizate, acestea vor rămâne arata ca intrarile radio normale. Dar atunci când utilizatorul face clic pentru a selecta un buton, vor obțineți un efect de animație nebun. Poti sa vezi exemple live pe pagina principală Radiobox care demonstrează fiecare stil alături de numele său.

Puteți instala Radiobox direct de la npm sau bower, sau chiar să descărcați fișierele pe computer pe mașină. GitHub găzduiește toate fișierele lor într-un CDN dacă doriți să jucați fără să descărcați nimic.

Singurul fișier de care aveți nevoie este radiobox.min.css care ar trebui să meargă chiar în capul dvs. de document. De acolo, tu doar adăugați o clasă simplă la fiecare buton radio în funcție de animația dorită.

Iată a fragment de cod pentru “Boing” efect:

Rețineți “Boing” animația are propriul fișier CSS denumit boing.min.css. Acest trebuie să fie incluse dacă intenționați să utilizați acest efect pe pagină.

Când descărcați Radiobox ar trebui obțineți un director demo cu demonstrații vii pentru toate aceste efecte. Poți pur și simplu copiați / inserați codul direct la pagina dvs. pentru a face să funcționeze fără hassle.

Pentru documentația completă, verificați repo principală impreuna cu live demo site-ul. Dacă doriți să contactați creatorii, puteți trimite un e-mail de la Site-ul web de 720kb sau prin Twitter @ 720kb_.