Démo 2: Animation circulaire sur un checkbox

Dans cette seconde démo, nous allons créer un checkbox avec effet circulaire de type radio bouton avec un effet bounce à l’aide du CSS3 en utilisant les pseudo éléments, la transition et l’animation à partir des keyframe

La structure html

La structure sera identique au démo précédent, mais nous allons changer le contenu du label pour le différencier du démo numero 1.

Le code CSS

Pour commencer, on va cacher en display none le checkbox.

On va styliser un peu notre liste <ul> comme le font-family, puis on va positionner en relative le label.

Pour avoir l’effet magique sur le label, on va jouer sur les pseudo element after et before.
Nous allons encore utiliser le font Awesome pour différencier chaque état.
Pour avoir le rendu du checkbox activer, on va associer l’unicode correspondant au pseudo élément before .
Pour l’animation CSS3, on va définir le type d’effet qu’on va utiliser dans notre @keyframe qui sera de type Bounce et durera 4 secondes , le compteur d’itération sera fixer à 1.

L’interprétation de la propriété CSS est un peu différente sur Mozilla donc on va mettre en place un code spécifique pour contrôler le rendu sur ce navigateur spécifique.

Maintenant, nous allons travailler avec l’effet bounce sur input[type=”checkbox”]:checked + label:after qui s’exécutera lorsque le checkbox est activé en utilisant l’animation de type bounce.

Enfin, nous allons travailler avec les keyframes en utilisant la propriété transform qui va varier la taille du cercle et aussi son opacité.

Répondre