Izveidojiet Fun Animated Radio pogas ar Radiobox.css

The noklusējuma HTML5 radio pogas ir diezgan garlaicīgi. Ir veidi, kā pielāgot tos izmantojot CSS3, bet lielākā daļa metožu koncentrēties tikai uz izskatu.

Radiobox.css koncentrējas uz izskatās un stils pievienojot pielāgotas CSS3 animācijas radio ieejām.

Šī bibliotēka ir pilnīgi bez maksas un atvērtais avots, GitHub lejupielādei. Ar šo CSS bibliotēku varat izvēlēties vairāk nekā 12 dažādas animācijas kas attiecas uz radio pogām.

Bez pielāgotiem CSS stiliem tie joprojām būs izskatās kā parastas radio ieejas. Bet, kad lietotājs noklikšķina, lai izvēlētos pogu, ko viņi būs iegūt crazy animācijas efektu. Tu vari redzēt dzīvi piemēri galvenajā Radiobox lapā, kas demonstrē katru stilu blakus tās nosaukumam.

Jūs varat instalēt Radiobox tieši no npm vai bower, vai pat lejupielādējiet failus lokāli savā datorā. GitHub visi faili tiek glabāti CDN ja jūs vēlaties spēlēt apkārt, neko neielādējot.

Vienīgais nepieciešamais fails ir radiobox.min.css kas būtu jāiet tieši jūsu dokumenta galvā. No turienes jūs vienkārši pievienojiet vienkāršu klasi katrai pogai, atkarībā no vēlamās animācijas.

Lūk, a koda fragmentu priekš “laivošana” efekts:

Ievērojiet “laivošana” animācijai ir savu CSS failu sauc boing.min.css. Tas ir jāiekļauj ja jūs plānojat izmantot šo efektu lapā.

Lejupielādējot Radiobox, jums vajadzētu iegūt demo direktoriju ar dzīvot demonstrācijas par visām šīm sekām. Jūs varat vienkārši kopējiet / ielīmējiet kodu tieši uz jūsu lapu, lai saņemtu to bez problēmu.

Par pilnīga dokumentācija, izbraukšana galvenais repo kopā ar tiešraides demonstrācijas vietne. Ja vēlaties sazināties ar autoriem, varat nosūtīt e-pastu no 720kb tīmekļa vietne vai ziņu, izmantojot Twitter @ 720kb_.