Stílusa saját jelölőnégyzetének animációs hatásai a Checkbox.css segítségével

Egy nemrégiben közzétett üzenetben egy egyedi animációs könyvtárat vettem figyelembe az egyéni rádió gombokhoz, a CSS.

Ezt a szabad könyvtárat 720kb szabadította fel, és gyorsan látta a Checkbox.css nevű nyomon követési alternatíva. Ez hasonló módon működik, kivéve azt újraformázza és animálja a HTML jelölőnégyzeteket.

Ez a könyvtár a könyvtárakkal együtt három különböző célból:

1. Radiobox.css - egyedi rádió animációk
2. Checkbox.css - egyedi jelölőnégyzet animációk
3. Checked.css - stílusok és animációk a meglévő elemek (rádiók és jelölőnégyzetek)

Ezek mindegyikét ugyanaz a csapat fejlesztette ki, és hasonló módon működnek. De meg kell minden egyes könyvtárat külön-külön ha teljes hatást szeretne kapni.

Tekintse meg a Checkbox.css GitHub-ot, hogy megtekinthesse ezeket a funkciókat és hogyan működik. Alapértelmezés szerint támaszkodnak A 2D a CSS átmenetekkel együtt átalakul, a böngésző támogatásától függően.

Ezek a könyvtárak egyike sem rendelkezik JS tartalék módszerekkel, így valóban csak CSS-meghajtású animációknál működik. De egy gyors pillantást vetett a bemutató oldalra, ha örömmel töltötte be ezeket az animációkat az oldalára.

A folyamat nem lehet egyszerűbb és egyszerűbb kicsi-nem kódolási ismereteket igényel (bár mindig hasznos lehet).

Miután a CSS stíluslapja megtalálható az oldalon, csak adjon hozzá egy osztályt a jelölőnégyzethez a formátummal négyzetet-x hol a “x” képviseli a kívánt animációt. Például itt van a kód “ugrás” animációs hatás:

A legjobb rész az, ahogyan ez a könyvtár lehet a rádió gomb formátumával együtt dolgozhat, is. Biztosan ajánlom a Checked.css könyvtárat, ha azt szeretné animált a meglévő elemeket.

Ne hagyd, hogy ezek a függőségek megijessenek. Elég sokan beállíthatják a Checkbox.css könyvtárat vagy a kapcsolódó könyvtárakat, mindent a semmiből egy kis másolattal és beillesztéssel.

Ha pedig kérdése vagy javaslata van a bevitt animációs csomaghoz, akkor a könyvtárak megpróbálnak üzenetet küldeni az alkotóknak a webhelyükön vagy a Twitteren @ 720kb_.