Styl své vlastní zaškrtávací políčko animace efekty s Checkbox.css
V nedávném příspěvku jsem se zabýval zábavnou animační knihovnou pro vlastní přepínače, powered by CSS.
Tato bezplatná knihovna byla vydána o 720kb a rychle viděla následná alternativa nazvaná Checkbox.css. Funguje to obdobným způsobem, kromě toho restyles a animuje zaškrtávací políčka HTML.
Tato knihovna přichází jako sada knihoven tři různé účely:
Radiobox.css- vlastní rádiové animaceCheckbox.css- vlastní animace zaškrtávacího políčkaChecked.css- styly & animuje existující vybrané prvky (rádia a zaškrtávací políčka)
Ty jsou vytvořeny stejným týmem a fungují podobným způsobem. Ale budete muset zahrnovat každou knihovnu individuálně chcete-li získat plné efekty.
Podívejte se na GitHub Checkbox.css a podívejte se na některé z těchto funkcí a na jejich fungování. Ve výchozím nastavení se spoléhají 2D transformace spolu s CSS přechody, v závislosti na podpoře prohlížeče.
Žádná z těchto knihoven nepřichází s JS pádovými metodami, takže opravdu fungují pouze pro animace založené na CSS. Ale jeden rychlý pohled na demo stránku by vás měl potěšit přidáním těchto animací na vaši stránku.
Proces nemohl být jednodušší a to vyžaduje znalosti z kódování (i když je vždy dobré mít nějaké).
Jakmile je šablona stylů CSS na vaší stránce, přidejte do svého políčka třídu s formátem zaškrtávací políčko-x Kde “X” představuje jakoukoliv animaci, kterou chcete. Například, zde je kód pro “skok” efekt animace:
Nejlepší je, jak tato knihovna může ve spojení s formátem rádiového tlačítka, také. Určitě bych doporučil Checked.css knihovnu, pokud chcete animovat stávající vybrané prvky.
Nedovolte, aby vás všechny tyto závislosti vyděsily. Skoro kdokoli může nastavit knihovnu Checkbox.css nebo některou z souvisejících knihoven, vše od nuly s malou kopií a vkládáním.
Pokud máte dotazy nebo návrhy pro tento balíček vstupních animačních knihoven, zkuste posílat zprávy tvůrcům prostřednictvím svých stránek nebo na Twitteru @ 720kb_.
