Sukurkite „Single-Element Spinner“ ir „Loaders“ su CSSPIN

Iš CSS3 galite sukurti puikių dalykų pasirinktiniai įvesties laukai į išskleidžiamajame meniu Ir netgi vektorinė grafika. Šie metodai yra greitai apeiti „JavaScript“, kad kūrėjams būtų lengviau sukurti geresnę naudotojų patirtį.

Vienas iš sudėtingiausių dalykų yra a įkelti spinner animaciją bet šiuolaikinė CSS animacija netgi daro tai gana paprasta.

Jei norite taupyti laiką nuo nulio, galite naudoti tokią biblioteką CSSPIN tonų iš anksto nustatyti užsakymai. Visos šios animacijos gali laisvai klonuoti ir visiškai atviros, todėl jūs turite visišką prieigą redaguoti kodą, kaip norite.

Sukūrus verpiklį su šia biblioteka yra vėjas. Tu tik nukopijuokite CSS biblioteką tada į savo puslapį pridėti pasirinktinius HTML elementus kur norite, kad jie būtų rodomi.

Šie pasirinktiniai spinneriai naudojami tik vienas HTML elementas sukurti animacijos efektą. Tai didžiulis, nes yra grafinis ir animacinis efektas teikiamos tik per CSS klases.

Ir kadangi turite prieigą prie šaltinio kodo, kurį galite pakeiskite formų, spalvų, dydžių ir animacijos greitį geriau atitiktų jūsų projektus.

Tiesiog pažymėkite kodą naudoja LESS sintaksę, taigi jums reikės susipažinti su šia išankstinio apdorojimo kalba, kad galėtumėte atlikti svarbius pakeitimus.

Tačiau galite rasti daug paprastų CSS pavyzdžių pagrindiniame demonstraciniame puslapyje, kartu su paprastos instrukcijos „GitHub“ puslapyje.

Jei esate susipažinę npm arba Bower sitie yra alternatyvius metodus bibliotekos diegimui.

Nesvarbu, kaip jūs jį įdiegsite, tai yra puiki CSS animacinė biblioteka, su kuria norite dirbti. Tai turi būti visiškai modulinis su daugybe naujų spinnerių, naujų animacijų ir kitų kūrėjų pritaikymų.

Jei norite sužinoti daugiau ir naršyti po visą dokumentaciją, patikrinkite CSSPIN repo GitHub. Kūrėjas taip pat padarė nedidelį nustatykite vaizdo įrašą galite žiūrėti toliau.