Twórz własne efekty animacji Checkbox za pomocą Checkbox.css

W ostatnim poście opisałem zabawną bibliotekę animacji dla niestandardowych przycisków radiowych, powered by CSS.

Ta bezpłatna biblioteka została wydana przez 720 KB i szybko zobaczyła kolejna alternatywa zwana Checkbox.css. Działa to w podobny sposób, z wyjątkiem tego pola wyboru HTML i animacje.

Ta biblioteka jest zestawem bibliotek z trzy różne cele:

1. Radiobox.css - niestandardowe animacje radiowe
2. Checkbox.css - niestandardowe animacje pola wyboru
3. Checked.css - style i animacje istniejące wybrane elementy (radia i pola wyboru)

Wszystkie są opracowywane przez ten sam zespół i działają w podobny sposób. Ale musisz dołącz każdą bibliotekę indywidualnie jeśli chcesz uzyskać pełne efekty.

Rzuć okiem na GitHub Checkbox.css, aby zobaczyć niektóre z tych funkcji i sposób ich działania. Domyślnie polegają na 2D przekształca się wraz z przejściami CSS, w zależności od obsługi przeglądarki.

Żadna z tych bibliotek nie jest wyposażona w metody awaryjne JS, więc naprawdę działa tylko dla animacji opartych na CSS. Ale jedno szybkie spojrzenie na stronę demonstracyjną powinno sprawić, że z przyjemnością dodasz te animacje do swojej strony.

Proces nie może być prostszy wymaga niewielkiej wiedzy programistycznej (chociaż zawsze warto mieć).

Gdy arkusz stylów CSS znajdzie się na twojej stronie, po prostu dodaj klasę do pola wyboru w formacie checkbox-x gdzie “x” reprezentuje dowolną animację. Na przykład, oto kod dla “skok” efekt animacji:

Najlepsze jest to, jak ta biblioteka może działa w połączeniu z formatem przycisku radiowego, zbyt. Zdecydowanie polecam bibliotekę Checked.css, jeśli chcesz animować istniejące wybrane elementy.

Nie pozwól, aby wszystkie te zależności przestraszyły cię. Prawie każdy może skonfigurować bibliotekę Checkbox.css lub dowolną z powiązanych bibliotek, wszystko od podstaw z małą kopią i wklejaniem.

Jeśli masz pytania lub sugestie dotyczące tego pakietu bibliotek animacji wejściowej, wyślij wiadomość do twórców za pośrednictwem ich witryny lub na Twitterze @ 720kb_.