Luo hauskoja animoituja radiopainikkeita Radiobox.css n avulla

Oletusarvoiset HTML5-radiot ovat melko tylsiä. On olemassa keinoja muokata niitä käyttäen CSS3: ta, mutta useimmat tekniikat keskittyä vain ulkonäköön.

Radiobox.css keskittyy ulkonäkö ja tyyli mukautettujen CSS3-animaatioiden lisääminen radiotuloihin.

Tämä kirjasto on täysin ilmainen ja avoin lähdekoodi, ladattavissa GitHubissa. Tällä CSS-kirjastolla voit valita yli 12 eri animaatiota jotka koskevat radiopainikkeita.

Ilman mukautettuja CSS-tyylejä ne jäävät edelleen näyttävät tavallisilta radiotuloista. Mutta kun käyttäjä napsauttaa napsauttamalla heitä saada hullu animaatiovaikutus. Sinä pystyt näkemään live-esimerkkejä Radioboxin tärkeimpiä sivuja, jotka esittävät jokaisen sen nimen vieressä olevan tyylin.

Voit asentaa Radioboxin suoraan npm: stä, tai jopa ladata tiedostot paikallisesti koneellesi. GitHub isännöi kaikki tiedostot CDN: ssä jos haluat pelata noin lataamatta mitään.

Tarvitset vain tiedoston radiobox.min.css jonka pitäisi mennä suoraan asiakirjan päähän. Sieltä olet juuri lisää yksinkertainen luokka jokaiselle valintanapille haluamasi animaation mukaan.

Tässä on a koodinpätkä varten “Boing” vaikutus:

Huomaa “Boing” animaatiolla ei ole oma CSS-tiedosto olla nimeltään boing.min.css. Tämä on sisällytettävä jos aiot käyttää tätä vaikutusta sivulla.

Kun lataat Radioboxin, sinun pitäisi saat demo-hakemiston kanssa live-demot kaikista näistä vaikutuksista. Voit yksinkertaisesti kopioi / liitä koodi suoraan sivullesi, jotta se toimii ilman vaivaa.

varten täydelliset asiakirjat, tutustu tärkein repo kanssa live-esittelysivusto. Jos haluat ottaa yhteyttä tekijöihin, voit lähettää sähköpostiviestin 720 kilotonnia tai viesti Twitterin kautta @ 720kb_.