Démo 1: Animation simple d’un checkbox

Nous allons créer une animation simple sur un checkbox en utilisant le Font Awesome, les pseudo éléments CSS3, la transition et l’opacité.

La structure HTML

Dans notre structure, nous allons utiliser une liste <ul> standard et dans chaque liste, nous allons placer le checkbox et le label.

C’est tout concernant le HTML , maintenant nous allons voir le code CSS nécessaire pour le fonctionnement de notre formulaire

Le code CSS

Puis, on va positionner en relative et mettre un padding sur chaque liste <li>.

Ensuite, pour avoir une jolie mise en forme on va styliser les pseudo classe after et before en utilisant la version unicode du font awesome combinée avec la transition et l’opacité pour afficher et masquer l’icône.

La dernière étape consiste à combiner le label et le checkbox dans le but de cocher celle-ci au clic sur le libellé en lui donnant un max-width de 25px et une opacité de 1.

Répondre