Stilius savo žymimojo langelio animacinius efektus su „Checkbox.css“

Neseniai paskelbus įrašą, aš uždėjau įdomų animacinės bibliotekos pasirinktinius radijo mygtukus, maitina CSS.

Ši laisva biblioteka buvo išleista 720kb ir greitai pamatė a papildoma alternatyva, vadinama Checkbox.css. Tai veikia panašiai, išskyrus tai atkurti ir animuoti HTML žymės langelius.

Ši biblioteka yra bibliotekų rinkinys su trijų skirtingų tikslų:

1. Radiobox.css - pritaikytos radijo animacijos
2. Checkbox.css - pasirinktiniai žymės langeliai
3. Checked.css - stiliai ir animuoti esamus pasirinktus elementus (radijas ir žymės langeliai)

Tai visi sukūrė ta pati komanda ir jie dirba panašiai. Bet jums reikia įtraukti kiekvieną biblioteką atskirai jei norite gauti visus efektus.

Pažvelkite į „Checkbox.css GitHub“, kad pamatytumėte kai kurias iš šių funkcijų ir kaip jie veikia. Pagal numatytuosius nustatymus jie remiasi 2D transformuojasi kartu su CSS perėjimais, priklausomai nuo naršyklės palaikymo.

Nė viena iš šių bibliotekų neturi JS atsarginių metodų, todėl jie tikrai veikia tik CSS maitinamoms animacijoms. Tačiau vienas greitas žvilgsnis į demonstracinį puslapį turėtų būti malonu pridėti šias animacijas į jūsų puslapį.

Šis procesas negali būti paprastesnis ir paprastesnis reikalauja mažai koduojamų kodavimo žinių (nors visada naudinga turėti kai kuriuos).

Kai CSS stilių lentelė yra jūsų puslapyje, tiesiog pridėkite klasę prie savo žymės langelio su formatu langelis-x kur “x” reiškia bet kokią norimą animaciją. Pavyzdžiui, čia yra kodo kodas “šokinėti” animacinis efektas:

Geriausia yra tai, kaip ši biblioteka gali dirbti kartu su radijo mygtuko formatu, taip pat. Aš norėčiau tikrai rekomenduoti „Checked.css“ biblioteką animuoti esamus pasirinktus elementus.

Neleisk, kad visos šios priklausomybės išgąsdintų jus. Beveik kiekvienas gali nustatyti „Checkbox.css“ biblioteką arba bet kurią iš susijusių bibliotekų, visi nuo nulio su maža kopijavimo ir įklijavimo.

Jei turite klausimų ar pasiūlymų dėl šio įvesties paketo, bibliotekos bando pranešimus kurti kūrėjus per savo svetainę arba „Twitter“ @ 720kb_.