Стиль Вашого власного прапорця Анімаційні ефекти з Checkbox.css
У недавній публікації я накрив цікаву бібліотеку анімації для користувальницьких перемикачів, живиться від CSS.
Ця безкоштовна бібліотека була випущена 720kb і швидко побачила a наступна альтернатива під назвою Checkbox.css. Це працює подібним чином, крім нього Рестайлінг та анімація прапорців HTML.
Ця бібліотека поставляється як набір бібліотек трьох різних цілей:
Radiobox.css- користувальницькі анімації радіоCheckbox.css- спеціальні анімації прапорцяChecked.css- styles & animates існуючі вибрані елементи (радіостанції та прапорці)
Всі вони розроблені однією командою, і вони працюють подібним чином. Але вам потрібно включити кожну бібліотеку окремо якщо ви хочете отримати повний ефект.
Подивіться на Checkbox.css GitHub, щоб побачити деякі з цих функцій і як вони працюють. За замовчуванням вони покладаються на 2D перетворюється разом з переходами CSS, залежно від підтримки браузера.
Жодна з цих бібліотек не має резервних методів JS, тому вони дійсно є працює тільки для анімацій, керованих CSS. Але, один швидкий погляд на демонстраційну сторінку повинен мати радість додавати ці анімації на вашу сторінку.
Процес не може бути простішим вимагає незнання кодування (хоча завжди корисно мати).
Після того, як таблиця стилів CSS знаходиться на вашій сторінці, просто додайте клас у ваш прапорець формату checkbox-x де “x” представляє будь-яку потрібну анімацію. Наприклад, ось код для “стрибати” ефект анімації:
Найкраща частина - як ця бібліотека може працювати разом з форматом радіо-кнопки, теж. Я б точно рекомендував бібліотеку Checked.css, якщо хочете анімувати існуючі вибрані елементи.
Не дозволяйте всім цим залежностям відлякати вас. Практично будь-хто може налаштувати бібліотеку Checkbox.css або будь-яку з відповідних бібліотек, все з нуля з невеликою копією та вставкою.
Якщо у вас є запитання або пропозиції щодо цього пакету вхідних анімаційних бібліотек, спробуйте надсилати повідомлення творцям через свій сайт або на Twitter @ 720kb_.
