Создайте свой собственный анимационный эффект с помощью 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>