Създайте единични елементи и товарачи с CSSPIN
С CSS3 можете да създадете някои удивителни неща от персонализирани полета за въвеждане да се падащи менюта и дори векторна графика. Тези техники са бързо изпреварване на JavaScript, улеснявайки разработчиците да създават по-добри потребителски преживявания.
Едно от най-трудните неща за изграждане е зареждане на анимация на spinner но модерната CSS анимация дори прави това доста просто.
За да спестите време от изграждането от нулата, можете да използвате библиотека като CSSPIN с тонове предварително дефинирани персонализирани центрофуги. Всички тези анимации са свободни да се клонират и напълно отворени, така че имате пълен достъп да редактирате кода, както желаете.
Създаването на ротационен механизъм с тази библиотека е бриз. Ти просто копирайте библиотеката на CSS след това в страницата си добавете персонализираните HTML елементи където искате да се появяват.
Тези персонализирани спинери използват само един HTML елемент за да създадете анимационен ефект. Това е огромно, защото графиката и анимационният ефект са предоставени само чрез CSS класове.
И тъй като имате достъп до изходния код, можете замени формите, цветовете, размерите и скоростите на анимацията да отговарят по-добре на вашите проекти.
Просто отбележете кода използва по-малък синтаксис, така че трябва да сте запознати с този език за предварителна обработка, за да направите големи редакции.
Но, можете да намерите много обикновени CSS примери на главната демонстрационна страница, заедно с прости инструкции на страницата на GitHub.
Ако сте запознат NPM или беседка това са алтернативни методи за инсталиране на библиотеката.
Без значение как ще го инсталирате, това е страхотна CSS анимационна библиотека, с която да работите. Това е трябвало да бъде напълно модулна с много място за нови брандове, нови анимации и персонализации от други разработчици.
За да научите повече и да прегледате цялата документация, разгледайте CSSPIN репо на GitHub. Създателят също е направил малък настройка на видео които можете да гледате по-долу.
