Estilize seus próprios efeitos de animação de caixa de seleção com Checkbox.css
Em um post recente, eu fiz uma divertida biblioteca de animação para botões de rádio personalizados, powered by CSS.
Essa biblioteca livre foi liberada por 720kb e rapidamente viu um alternativa de acompanhamento chamada Checkbox.css. Isso funciona de maneira semelhante, exceto que restyles e anima caixas de seleção de HTML.
Esta biblioteca vem como um conjunto de bibliotecas com três finalidades distintas:
Radiobox.css- animações de rádio personalizadasCheckbox.css- animações personalizadas da caixa de seleçãoVerificado.css- Estilos e anima elementos existentes existentes (rádios e caixas de seleção)
Todos são desenvolvidos pela mesma equipe e funcionam de maneira semelhante. Mas você precisará incluir cada biblioteca individualmente se você quiser obter os efeitos completos.
Dê uma olhada no Checkbox.css GitHub para ver alguns desses recursos e como eles funcionam. Por padrão, eles confiam em Transformações 2D junto com transições CSS, dependendo do suporte do navegador.
Nenhuma dessas bibliotecas vem com métodos de fallback JS, então eles realmente trabalhe apenas para animações baseadas em CSS. Mas, uma rápida olhada na página de demonstração deve deixar você se deliciar em adicionar essas animações à sua página.
O processo não poderia ser mais simples e requer pouco ou nenhum conhecimento de codificação (embora seja sempre útil ter alguns).
Depois que a folha de estilo CSS estiver na sua página, basta adicionar uma classe à sua caixa de seleção com o formato checkbox-x onde o “x” representa qualquer animação que você quiser. Por exemplo, aqui está o código para o “saltar” efeito de animação:
A melhor parte é como essa biblioteca pode trabalhar em conjunto com o formato do botão de rádio, também. Eu recomendaria definitivamente a biblioteca Checked.css se você quiser animar elementos selecionados existentes.
Não deixe que todas essas dependências o assustem. Praticamente qualquer um pode configurar a biblioteca Checkbox.css ou qualquer uma das bibliotecas relacionadas, tudo do zero com uma pequena cópia e colagem.
E, se você tiver dúvidas ou sugestões para este pacote de bibliotecas de animação de entrada, tente enviar mensagens aos criadores por meio de seu site ou no Twitter @ 720kb_.
