Vytvořte zábavná animovaná rádio tlačítka s Radiobox.css

standardních přepínačů HTML5 jsou docela nudné. Existují způsoby, jak přizpůsobit pomocí CSS3, ale většiny technik zaměřit se pouze na vzhled.

Radiobox.css soustředí se na vzhled a styl přidávání vlastních CSS3 animací do rádiových vstupů.

Tato knihovna je zcela zdarma a open source, ke stažení na GitHub. S touto knihovnou CSS si můžete vybrat z více než 12 různých animací , které se vztahují na přepínače.

Bez vlastních stylů CSS budou stále vypadají jako normální rádiové vstupy. Když však uživatel klikne na tlačítko, vybere dostat bláznivý animační efekt. Můžeš vidět živé příklady na hlavní stránce Radioboxu, která dema každého stylu vedle názvu.

Můžete nainstalovat Radiobox přímo z npm nebo bower, nebo dokonce stahovat soubory lokálně do počítače. GitHub hostuje všechny své soubory v CDN pokud chcete hrát bez stahování.

Jediný soubor, který potřebujete, je radiobox.min.css který by měl jít přímo do hlavy dokumentu. Odtud jen přidat jednoduchou třídu ke každému přepínači v závislosti na požadované animaci.

Tady je fragment kódu pro “boing” účinek:

Poznámka: “boing” animace má vlastní soubor CSS volal boing.min.css. Tento musí být zahrnuta Pokud plánujete použít tento efekt na stránce.

Když si stáhnete Radiobox, měli byste získat demo adresář s živé ukázky pro všechny tyto efekty. Můžete jednoduše zkopírujte / vložte kód přímo na stránku, abyste ji mohli používat bez potíží.

Pro kompletní dokumentace, podívejte se na hlavní repo spolu s živé demo stránky. Pokud chcete kontaktovat tvůrce, můžete poslat e-mail z webu 720kb webové stránky nebo zprávu přes Twitter @ 720kb_.