Ustvarite zabavne animirane gumbe z radiobox.css

The privzeti izbirni gumbi HTML5 so precej dolgočasne. Obstajajo načini prilagodite z uporabo CSS3, vendar večina tehnik osredotočiti se samo na videz.

Radiobox.css osredotočen na izgleda in slog dodajanje animacij CSS3 po meri za radijske vhode.

Ta knjižnica je popolnoma brezplačno in odprtokodno, na voljo na spletnem mestu GitHub za prenos. S to knjižnico CSS lahko izberete več kot 12 različnih animacij , ki veljajo za izbirne gumbe.

Brez stilov CSS po meri bodo še vedno izgledajo kot običajni radijski vhodi. Toda, ko uporabnik klikne, da izbere gumb, bo dobite nori animacijski učinek. Lahko vidiš primeri v živo na glavni strani radijskega predala, ki prikaže vsak slog poleg imena.

Namestite lahko Radiobox naravnost iz npm ali bower, ali celo prenesete datoteke lokalno na vaš računalnik. GitHub gosti vse svoje datoteke v CDN če se želite igrati, ne da bi karkoli prenesli.

Edina datoteka, ki jo potrebujete, je radiobox.min.css ki bi morala iti v glavo dokumenta. Od tam, vi prav dodaj preprost razred na vsak izbirni gumb, odvisno od želene animacije.

Tukaj je a odrezek kode za “boing” učinek:

Zapomnite si “boing” animacija ima svojo datoteko CSS imenuje boing.min.css. To vključiti če nameravate uporabiti ta učinek na strani.

Ko prenesete Radiobox, morate dobite demo imenik z demo posnetke za vse te učinke. Lahko preprosto kopirajte / prilepite kodo neposredno na vašo stran, da bo delovala brez težav.

Za popolno dokumentacijo, Oglejte si glavni repo skupaj z predstavitveno spletno mesto v živo. Če se želite obrniti na ustvarjalce, lahko pošljete e - poštno sporočilo Spletna stran 720kb ali sporočilo prek storitve Twitter @ 720kb_.