Työnnä oma valintaruutu Animation Effects -valintaruutu Checkbox.css
Viimeaikaisessa viestissä katoin hauskan animaatiokirjaston muokattuja radiopainikkeita varten, powered by CSS.
Tämä vapaa kirjasto julkaistiin 720 kilotavulla ja näki nopeasti a seurantavaihtoehto nimeltä Checkbox.css. Tämä toimii samalla tavalla kuin se palauttaa HTML-valintaruudut.
Tämä kirjasto on kirjastojen sarja kolme erillistä tarkoitusta:
Radiobox.css- mukautetut radio-animaatiotCheckbox.css- mukautetut valintaruudun animaatiotChecked.css- tyylejä ja animoi olemassa olevat elementit (radiot ja valintaruudut)
Nämä ovat kaikki saman ryhmän kehittämiä ja toimivat samalla tavalla. Mutta sinun täytyy sisällyttää jokainen kirjasto erikseen jos haluat saada täydelliset vaikutukset.
Tutustu Checkbox.css GitHubiin nähdäksesi joitakin näistä ominaisuuksista ja miten ne toimivat. Oletuksena ne luottavat 2D muuntaa yhdessä CSS-siirtymien kanssa, riippuen selaimen tuesta.
Yksikään näistä kirjastoista ei ole JS-varmuuskopiointimenetelmiä, joten ne todella toimii vain CSS-käyttöisillä animaatioilla. Mutta yksi pikakatselu demo-sivulle olisi pitänyt sinun mielelläni lisätä nämä animaatiot sivullesi.
Prosessi ei voisi olla yksinkertaisempi ja se ei olisi mahdollista vaatii vähän tai ei lainkaan koodausta (vaikka se on aina hyödyllistä).
Kun CSS-tyylitaulukko on sivulla, lisää vain luokkasi valintaruutuun valintaruutu-x missä “x” edustaa mitä tahansa animaatiota. Esimerkiksi tässä on koodi “hypätä” animaatiovaikutus:
Parasta on, miten tämä kirjasto voi toimivat yhdessä radiopainemuodon kanssa, liian. Suosittelen ehdottomasti Checked.css-kirjastoa, jos haluat animoida olemassa olevia valittuja elementtejä.
Älä anna kaikkien näiden riippuvuuksien pelottaa sinua. Melko paljon kukaan voi määrittää Checkbox.css-kirjaston tai minkä tahansa siihen liittyvän kirjaston, kaikki tyhjästä hieman kopioimalla ja liittämällä.
Jos sinulla on kysyttävää tai ehdotuksia tähän pakettiin, animaatiokirjastot yrittävät viestiä luojia sivustoiltaan tai Twitterissä @ 720kb_.
