Loo lõbusad animeeritud raadio nupud Radiobox.css abil

The vaikimisi HTML5 raadionupud on üsna igav. On võimalusi neid kohandada kasutades CSS3, kuid enamik tehnikaid keskenduma ainult välimusele.

Radiobox.css keskendub näeb välja ja stiili kohandatud CSS3 animatsioonide lisamine raadiosisenditele.

See raamatukogu on täiesti tasuta ja avatud lähtekoodiga, allalaadimiseks saadaval GitHubis. Selle CSS raamatukogu abil saate valida rohkem kui 12 erinevat animatsiooni mis puudutavad raadionuppe.

Ilma kohandatud CSS-stiilideta jäävad nad siiani näevad välja nagu tavalised raadiosisendid. Aga kui kasutaja klõpsab nupu valimiseks saada hull animatsiooniefekt. Sa näed elavad näited Raadio põhileheküljel, mis demoob iga stiili oma nime kõrval.

Saate installida Radioboxi otse npm-st või bowerist, või isegi faile kohalikult oma seadmesse alla laadida. GitHub kõik oma failid CDN-is kui soovite mängida ilma midagi alla laadimata.

Ainult vajalik fail on radiobox.min.css mis peaks minema otse dokumendi pea. Sealt sa lihtsalt lisage lihtne klass sõltuvalt soovitud animatsioonist.

Siin on a koodilõik Selle eest “paadisõit” mõju:

Pange tähele “paadisõit” animatsioon on olemas oma CSS-faili kutsus boing.min.css. See tuleb lisada kui kavatsete seda efekti lehel kasutada.

Kui laadite alla Radioboxi, peaksite seda tegema saada demo kataloog koos kõigi nende efektide kohta. Sa võid lihtsalt kopeeri / kleebi kood otse oma lehele, et saada seda ilma probleemideta.

Sest täielik dokumentatsioon, vaadake peamine repo koos live demo sait. Kui soovite ühendust loojaga, saate saata e-kirja 720kb veebisait või sõnum Twitteri kaudu @ 720kb_.