Создайте свой собственный анимационный эффект с помощью Checkbox.css
В недавнем посте я описал забавную библиотеку анимации для пользовательских радио-кнопок, работает на CSS.
Эта бесплатная библиотека была выпущена 720kb и быстро увидела альтернатива последующей проверки под названием Checkbox.css. Это работает аналогичным образом, кроме рестайлинг и анимация HTML-флажков.
Эта библиотека поставляется в виде набора библиотек с три разные цели:
Radiobox.css- пользовательские радио анимацииCheckbox.css- пользовательские флажки анимацииChecked.css- стили и анимация существующих выбранных элементов (радио и флажки)
Все они разработаны одной и той же командой и работают одинаково. Но вам нужно включить каждую библиотеку в отдельности если вы хотите получить полный эффект.
Загляните на Checkbox.css GitHub, чтобы увидеть некоторые из этих функций и их работу. По умолчанию они полагаются на 2D-трансформации вместе с CSS-переходами, в зависимости от поддержки браузера.
Ни одна из этих библиотек не поставляется с резервными методами JS, поэтому они действительно работает только для CSS-анимации. Но одним быстрым взглядом на демонстрационную страницу вы будете рады добавить эти анимации на свою страницу.
Процесс не может быть проще, и это не требует никаких знаний кодирования (хотя всегда полезно иметь немного).
Как только таблица стилей CSS появится на вашей странице, просто добавьте класс к вашему флажку с форматом Флажок-х где “Икс” представляет любую анимацию, которую вы хотите. Например, вот код для “Прыгать” эффект анимации:
Самое приятное то, как эта библиотека может работать в сочетании с форматом переключателя, тоже. Я определенно рекомендую библиотеку Checked.css, если вы хотите оживить существующие выбранные элементы.
Не позволяйте всем этим зависимостям отпугивать вас. Практически каждый может настроить библиотеку Checkbox.css или любую из связанных с ней библиотек., все с нуля с небольшой копией и вставкой.
И, если у вас есть вопросы или предложения по этому пакету входных библиотек анимации, попробуйте отправить сообщение создателям через их сайт или через Twitter @ 720kb_.
