Создайте свой собственный анимационный эффект с помощью Checkbox.css
В недавнем посте я описал забавную библиотеку анимации для пользовательских переключателей на основе CSS.
Эта бесплатная библиотека была выпущена 720KB и быстро увидел альтернативную альтернативу под названием Checkbox.css, Это работает аналогичным образом, за исключением того, что оно повторно создает и анимирует флажки HTML.
Эта библиотека поставляется в виде набора библиотек с тремя различными целями:
- Radiobox.css — пользовательские радио анимации
- Checkbox.css — пользовательский флажок анимации
- Checked.css — стили и анимация существующих выбранных элементов (радио и флажки)
Читайте также: расширенный стиль чекбокса с помощью CSS Grid
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Все они разработаны одной и той же командой и работают одинаково. Но вам нужно будет включить каждую библиотеку отдельно, если вы хотите получить полный эффект.
Взгляните на Checkbox.css GitHub чтобы увидеть некоторые из этих функций и как они работают. По умолчанию они полагаются на 2D-преобразования и CSS-переходы, в зависимости от поддержки браузера.
Ни одна из этих библиотек не поставляется с резервными методами JS, поэтому они действительно работают только с CSS-анимацией. Но, один быстрый взгляд на демонстрационная страница Если бы вы были рады добавить эти анимации на вашу страницу.
Процесс не может быть проще, и он требует практически никаких знаний кодирования (хотя всегда полезно иметь некоторые).
Как только таблица стилей CSS появится на вашей странице, просто добавьте класс к вашему флажку с форматом checkbox-x, где «x» представляет любую анимацию, которую вы хотите. Например, вот код для анимационного эффекта «прыжок»:
Самое приятное то, как эта библиотека может работать в сочетании с форматом переключателей. Я определенно рекомендую Библиотека Checked.css если вы хотите анимировать существующие выбранные элементы.
Не позволяйте всем этим зависимостям отпугивать вас. Практически любой может настроить библиотеку Checkbox.css или любую из связанных с ней библиотек, все с нуля с небольшим копированием и вставкой.
И, если у вас есть вопросы или предложения для этого пакета входных библиотек анимации, попробуйте отправить сообщение создателям через их сайт или в твиттере @ 720kb_,
Читайте также: Дизайн пользовательского интерфейса: настройка флажков и кнопок радио с CSS3
<script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)