Стилизирайте вашите собствени анимационни ефекти с Checkbox.css
В един неотдавнашен пост покрих забавна библиотека с анимации за персонализирани радио бутони, захранва се от CSS.
Тази безплатна библиотека беше пусната от 720kb и бързо видя a последваща алтернатива, наречена Checkbox.css. Това работи по подобен начин, с изключение на него рестартира и анимира HTML квадратчетата за отметка.
Тази библиотека идва като набор от библиотеки с три различни цели:
Radiobox.css- персонализирани радио анимацииCheckbox.css- персонализирани анимации за отметкаChecked.css- styles & animates съществуващи избрани елементи (радиостанции и квадратчета за отметка)
Всички те са разработени от един и същ екип и те работят по подобен начин. Но ще трябва включва всяка библиотека поотделно ако искате да получите пълния ефект.
Погледни в Checkbox.css GitHub, за да видиш някои от тези функции и как те работят. По подразбиране те разчитат 2D трансформира заедно с CSS преходите, в зависимост от поддръжката на браузъра.
Нито една от тези библиотеки не идва с резервни методи на JS, така че наистина работи само за анимации, задвижвани от CSS. Но един бърз поглед към демонстрационната страница би трябвало да ви зарадва да добавите тези анимации към страницата си.
Процесът не може да бъде по-прост и то изисква малко знание за кодиране (въпреки че винаги е полезно да имате някои).
След като CSS стилът е на страницата ви, трябва само да добавите клас в квадратчето си с формата отметка-х където “х” представлява каквато и анимация искате. Например, тук е кодът за “скок” анимационен ефект:
Най-добрата част е как тази библиотека може работят заедно с формата на бутона за избор, също. Определено бих препоръчал библиотеката Checked.css, ако искате анимирате съществуващите избрани елементи.
Не позволявайте всички тези зависимости да ви плашат. Доста всеки може да настрои библиотеката Checkbox.css или някоя от свързаните с нея библиотеки, всички от нулата с малко копиране и поставяне.
И ако имате въпроси или предложения за този пакет входни анимационни библиотеки, опитайте да изпращате съобщения до създателите чрез сайта им или в Twitter @ 720kb_.
