Sukurkite „Fun Animated Radio“ mygtukus su „Radiobox.css“

The numatytieji HTML5 radijo mygtukai yra gana nuobodu. Yra būdų pritaikyti juos naudojant CSS3, bet dauguma metodų sutelkti dėmesį tik į išvaizdą.

Radiobox.css dėmesys skiriamas atrodo ir stilius pridedant pasirinktines CSS3 animacijas radijo įvestims.

Ši biblioteka yra visiškai nemokama ir atviro kodo, atsisiųsti „GitHub“. Su šia CSS biblioteka galite pasirinkti iš daugiau nei 12 skirtingų animacijų kurie taikomi radijo mygtukams.

Be individualių CSS stilių, jie vis dar bus atrodo kaip įprasti radijo įėjimai. Bet kai vartotojas spustelės pasirinktą mygtuką, jis bus gauti crazy animacijos efektą. Jūs galite pamatyti gyvi pavyzdžiai pagrindiniame „Radiobox“ puslapyje, kuriame demonstruojamas kiekvienas stilius šalia jo pavadinimo.

Galite įdiegti „Radiobox“ tiesiai iš npm arba bower, arba netgi atsisiųskite failus į savo kompiuterį. GitHub talpina visus savo failus CDN jei norite žaisti, neperkeldami nieko.

Vienintelis reikalingas failas yra radiobox.min.css kuris turėtų eiti tiesiai į dokumento galvutę. Iš ten jūs tiesiog pridėkite paprastą klasę prie kiekvieno radijo mygtuko, priklausomai nuo norimos animacijos.

Štai a kodo fragmentas už “valtis” poveikis:

Atkreipkite dėmesį į “valtis” animacija yra savo CSS failą vadinamas boing.min.css. Tai turi būti įtrauktas jei planuojate naudoti šį efektą puslapyje.

Atsisiųsdami „Radiobox“, turėtumėte gauti demo katalogą su gyvai demonstruoti visus šiuos efektus. Jūs galite tiesiog nukopijuokite / įklijuokite kodą tiesiai į savo puslapį, kad jis veiktų be vargo.

Dėl visą dokumentaciją, patikrinkite pagrindinis repo kartu su gyva demonstracinė svetainė. Jei norite susisiekti su kūrėjais, galite siųsti el. Laišką iš 720kb svetainė arba pranešimą per „Twitter“ @ 720kb_.