Создайте свой собственный анимационный эффект с помощью Checkbox.css

В недавнем посте я описал забавную библиотеку анимации для пользовательских переключателей на основе CSS.

Эта бесплатная библиотека была выпущена 720KB и быстро увидел альтернативную альтернативу под названием Checkbox.css, Это работает аналогичным образом, за исключением того, что оно повторно создает и анимирует флажки HTML.
Checkbox.css пользовательская таблица стилейЭта библиотека поставляется в виде набора библиотек с тремя различными целями:

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

  1. Radiobox.css – пользовательские радио анимации
  2. Checkbox.css – пользовательский флажок анимации
  3. Checked.css – стили и анимация существующих выбранных элементов (радио и флажки)

Все они разработаны одной и той же командой и работают одинаково. Но вам нужно будет включить каждую библиотеку отдельно, если вы хотите получить полный эффект.

Взгляните на Checkbox.css GitHub чтобы увидеть некоторые из этих функций и как они работают. По умолчанию они полагаются на 2D-преобразования и CSS-переходы, в зависимости от поддержки браузера.

Ни одна из этих библиотек не поставляется с резервными методами JS, поэтому они действительно работают только с CSS-анимацией. Но, один быстрый взгляд на демонстрационная страница Если бы вы были рады добавить эти анимации на вашу страницу.

Процесс не может быть проще, и он требует практически никаких знаний кодирования (хотя всегда полезно иметь некоторые).

Как только таблица стилей CSS появится на вашей странице, просто добавьте класс к вашему флажку с форматом checkbox-x, где «x» представляет любую анимацию, которую вы хотите. Например, вот код для анимационного эффекта «прыжок»:

Самое приятное то, как эта библиотека может работать в сочетании с форматом переключателей. Я определенно рекомендую Библиотека Checked.css если вы хотите анимировать существующие выбранные элементы.
Библиотека анимации Checked.cssНе позволяйте всем этим зависимостям отпугивать вас. Практически любой может настроить библиотеку Checkbox.css или любую из связанных с ней библиотек, все с нуля с небольшим копированием и вставкой.

И, если у вас есть вопросы или предложения для этого пакета входных библиотек анимации, попробуйте отправить сообщение создателям через их сайт или в твиттере @ 720kb_,

            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *