Vytvorte jednoprvkové Spinners a Nakladače s CSSPIN

Môžete vytvoriť niektoré úžasné veci s CSS3, od vlastné vstupné polia na rozbaľovacích a dokonca vektorová grafika. Tieto techniky sú rýchlo prekonávať JavaScript, čo uľahčuje vývojárom vytváranie lepších používateľských skúseností.

Jedna z najtichostnejších vecí, ktoré je potrebné vybudovať, je načítavanie animácie spinner ale moderná animácia CSS dokonca robí to dosť jednoduché.

Ak chcete ušetriť čas budovania od začiatku, môžete použiť knižnicu, ako je CSSPIN s tonami preddefinované vlastné odstredivky. Všetky tieto animácie sú slobodné klonovať a sú úplne otvorené, takže máte plný prístup upraviť kód podľa vlastného uváženia.

Nastavenie rotátora s touto knižnicou je hračkou. Ty iba skopírujte knižnicu CSS do svojej stránky potom pridajte vlastné prvky HTML kdekoľvek sa chcete zobraziť.

Tieto vlastné rozmetávače používajú iba jeden prvok HTML na vytvorenie animačného efektu. Je to obrovské, pretože grafický a animovaný efekt je čisto prostredníctvom tried CSS.

A keďže máte prístup k zdrojovému kódu, môžete to nahradiť tvary, farby, veľkosti a rýchlosti animácie aby lepšie vyhovovali vašim projektom.

Stačí si všimnúť kód používa syntax LESS, takže budete musieť byť oboznámení s týmto jazykom predbežného spracovania, aby ste vykonali akékoľvek dôležité úpravy.

Ale môžete nájsť veľa jednoduché príklady CSS na hlavnej demo stránke spolu s jednoduché pokyny na stránke GitHub.

Ak ste oboznámení NPM alebo altánok to sú alternatívne metódy pre inštaláciu knižnice.

Bez ohľadu na to, ako si to nainštalujete, je to skvelá animačná knižnica CSS, s ktorou môžete pracovať. Má to byť plne modulárne s dostatkom priestoru pre nové spinery, nové animácie a prispôsobenia od iných vývojárov.

Ak sa chcete dozvedieť viac a prezrieť si celú dokumentáciu, pozrite si CSSPIN repo na GitHub. Tvorca tiež urobil malý nastavenie videa ktoré môžete sledovať nižšie.