Vytvorte animované rádiové gombíky s funkciou Radiobox.css

predvolené prepínače HTML5 sú dosť nudné. Existujú spôsoby, ako prispôsobiť ich pomocou CSS3, ale väčšina techník zamerať sa len na vzhľad.

Radiobox.css zameraný na vzhľad a štýl pridávanie vlastných animácií CSS3 do rádiových vstupov.

Táto knižnica je úplne zadarmo a open source, k dispozícii na stránkach GitHub. Pomocou tejto knižnice CSS si môžete vybrať viac ako 12 rôznych animácií ktoré sa vzťahujú na prepínacie tlačidlá.

Bez vlastných štýlov CSS budú stále vyzerajú ako normálne rádiové vstupy. Ale keď používateľ klikne na tlačidlo, vyberie tlačidlo získať bláznivý animačný efekt. Môžeš vidieť živé príklady na hlavnej stránke Radiobox, ktorá ukáže každý štýl vedľa jeho názvu.

Môžete nainštalovať Radiobox priamo z npm alebo bower, alebo dokonca sťahovať súbory lokálne do vášho počítača. GitHub hostia všetky svoje súbory v CDN ak chcete hrať bez toho, aby ste si stiahli nič.

Jediný súbor, ktorý potrebujete, je radiobox.min.css čo by malo ísť priamo do hlavičky dokumentu. Odtiaľ ste práve pridajte jednoduchú triedu ku každému prepínaču v závislosti od požadovanej animácie.

Tu je a útržok kódu pre “Boing” efekt:

Poznámka: “Boing” animácia má vlastný súbor CSS volal boing.min.css. toto musí byť zahrnuté ak plánujete tento efekt použiť na stránke.

Pri preberaní Radioboxu by ste mali získať demo adresár s živé ukážky všetkých týchto účinkov. Môžete to jednoducho skopírujte / prilepte kód priamo na svoju stránku, aby ste ju pracovali bez problémov.

pre kompletnú dokumentáciu, pozrite sa na hlavná repo spolu s živé demo stránky. Ak sa chcete obrátiť na tvorcov, môžete od nich poslať e-mail 720kb webových stránok alebo správu cez Twitter @ 720kb_.