Stiilige oma märkekasti animatsiooniefektid Checkbox.css abil
Hiljutises postituses käsitlesin kohandatud raadionuppude jaoks lõbusat animatsiooniraamatukogu, powered by CSS.
See vaba raamatukogu vabastati 720 kb võrra ja nägi kiiresti a järelkontrolli alternatiiv nimega Checkbox.css. See toimib sarnaselt, välja arvatud see taastab HTML-märkeruudud.
See raamatukogu on koos raamatukogu komplektiga kolm erinevat eesmärki:
Radiobox.css- kohandatud raadio-animatsioonidCheckbox.css- kohandatud märkeruutude animatsioonidChecked.css- stiilid ja animeerib olemasolevad elemendid (raadiod ja märkeruudud)
Need kõik on välja töötatud sama meeskonna poolt ja nad töötavad sarnaselt. Aga sa pead lisage iga raamatukogu eraldi kui soovite täielikke efekte saada.
Vaadake Checkbox.css GitHubi, et näha mõningaid neid funktsioone ja kuidas nad töötavad. Vaikimisi toetuvad nad 2D muundub koos CSS üleminekutega, sõltuvalt brauseri toest.
Ükski nendest raamatukogudest ei sisalda JS varu-meetodeid, nii et need on tõesti töötavad ainult CSS-toega animatsioonid. Kuid üks kiire pilk demo lehele oleks pidanud teid rõõmuga lisama need animatsioonid teie lehele.
Protsess ei saa olla lihtsam ja lihtsam vajab kodeerimiskogemust vähe (kuigi see on alati kasulik).
Kui CSS-laaditabel on teie lehel, lisage vorminguga lihtsalt märkeruutu klass märkeruut-x kus “x” esindab mis tahes soovitud animatsiooni. Näiteks siin on kood “hüpata” animatsiooniefekt:
Parim osa on see, kuidas see raamatukogu saab töötama koos raadionupu vorminguga, ka. Soovitaksin kindlasti, kui soovite, teeki Checked.css animeerida olemasolevaid valitud elemente.
Ära lase kõigil nendel sõltuvustel sind hirmutada. Päris palju saab igaüks seadistada Checkbox.css raamatukogu või mõnda sellega seotud raamatukogu, kõik nullist väikese koopia ja kleepimisega.
Ja kui teil on küsimusi või ettepanekuid selle sisend-paketi jaoks, proovige teekides raamatukogusid proovida oma saidi või Twitteri @ 720kb_ kaudu.
