Szórakoztató animált rádió gombok létrehozása a Radiobox.css segítségével

A alapértelmezett HTML5 rádió gombok elég unalmasak. Van módja annak, hogy testreszabhatja őket CSS3 használatával, de a legtöbb technikával csak a kinézetre összpontosít.

Radiobox.css fókuszál úgy néz ki, és stílus egyéni CSS3 animációk hozzáadása a rádió bemenetekhez.

Ez a könyvtár teljesen ingyenes és nyílt forráskód, letölthető a GitHub-on. A CSS könyvtár segítségével választhat több mint 12 különböző animáció amelyek a rádió gombokra vonatkoznak.

Egyéni CSS-stílusok nélkül még mindig úgy néz ki, mint a normál rádió bemenet. De amikor a felhasználó rákattint egy választógombra kap egy őrült animációs hatást. Láthatod élő példák a Radiobox főoldalán, amely bemutatja a nevének minden stílusát.

Telepítheti a Radioboxot egyenesen az npm-ről vagy a talajból, vagy akár letöltheti a fájlokat a gépére. GitHub az összes fájlt CDN-ben tárolja ha szeretne játszani anélkül, hogy bármit letöltene volna.

Az egyetlen fájl, amire szüksége van radiobox.min.css ami megy közvetlenül a dokumentumfejbe. Innen csak te adjunk hozzá egy egyszerű osztályt a kívánt animációtól függően.

Itt van egy kódrészlet a “boing” hatás:

Jegyezze fel a “boing” animáció van saját CSS fájlját hívott boing.min.css. Ez bele kell foglalni ha ezt a hatást az oldalon használja.

A Radiobox letöltésekor kap egy demo könyvtárat val vel élő demók ezeknek a hatásoknak. Egyszerűen másolja / illessze be a kódot közvetlenül az oldalára, hogy problémamentesen működjön.

mert teljes dokumentáció, nézd meg a fő repo együtt a élő demo oldal. Ha kapcsolatba kíván lépni az alkotókkal, küldhet egy e-mailt a 720kb webhely vagy üzenet a Twitteren keresztül @ 720kb_.