Cet article présente le code des effets spéciaux de case à cocher d'un formulaire natif H5 et est partagé avec tout le monde. Les détails sont les suivants :
L'effet est le suivant :
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox { margin: 50px; position: relative height: auto; 14px ; } .md-checkbox label>span.inc { -webkit-animation : facilité growCircle 0.2s ; facilité growCircle 0,2 s ; animation : facilité growCircle 0,2 s ; } @keyframes growCircle { 0 %, 100 % { transform : scale(0); } } .md-checkbox label>span.inc { background : #fff gauche : -20px ; -20px ; hauteur : 60 px ; largeur : 60 px ; opacité : 0 ; rayon-bordure : 50 % ! important ; -moz-border-radius : 50 % ; md-checkbox input[type=checkbox] { visibilité : cachée ; position : absolue } .md-checkbox label { curseur : pointeur ; padding-left : 30px ; } .md-checkbox label>span { display : position du bloc : gauche : 0 ; -webkit-transition-duration : -moz-transition-duration : 0,2 s ; -durée : 0,2 s ; } .md-checkbox label>.check { haut : -4px à gauche : 6px ; 10px ; hauteur : 20px ; bordure : 2px solide #26A69A ; bordure-haut : aucune ; opacité : 0 ; -webkit-transform : rotation (180deg) ; rotation (180 degrés); transformation : rotation (180 degrés) ; -webkit-transition-delay : 0,2 s ; -moz-transition-delay : 0,2 s ; délai de transition : 0,2 s ; } .md-checkbox input[type=checkbox]:checked~label>.check { opacité : 1 ; -webkit-transform : scale(1) rotation (45deg); -moz-transform : échelle (1) rotation (45 deg) ; transformation : échelle (1) rotation (45 deg ); .md-checkbox input[type=checkbox]:checked~label>.box { opacité : 0 ; -webkit-transform : scale(0) rotate(-180deg); ); transformer : scale(0) rotate(-180deg); } .md-checkbox label>.box { top : 0px border : 2px solide ; #666 ; hauteur : 20 px ; largeur : 20 px ; indice-z : 5 ; -webkit-transition-delay : 0,2s ; -moz-transition-delay : 0,2s ; /head> <body> <div class=md-checkbox> <input type=checkbox id=test class=md-check /> <label for=test> <span></span> <span class=check></span> <span class=box></span> Option 1 </label> </div> <script> var list = document.getElementsByTagName('input' ); for(var i =0;i<list.length;i++){ (function(n){ list[n].addEventListener('click',function(e){ var inc = this.nextElementSibling.firstElementChild; inc.className = ''; setTimeout(function(){ inc.className = 'inc'; },0 }) })(i) } </script> </body></ html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.