In diesem Artikel wird der Kontrollkästchen-Spezialeffektcode eines nativen H5-Formulars vorgestellt und mit allen geteilt. Die Details lauten wie folgt:
Der Effekt ist wie folgt:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox { margin: 50px; 14px; } .md-checkbox label>span.inc { -webkit-animation: wachsenKreis 0,2s Leichtigkeit; wachsenKreis 0,2s Leichtigkeit; @keyframes wachsenKreis { 0%, 100% { transform: scale(0); } } .md-checkbox label>span.inc { Hintergrund: #fff; oben: -20px; Höhe: 60px; Deckkraft: 50% !important; -webkit-border-radius: 50% ! md-checkbox input[type=checkbox] { Sichtbarkeit: versteckt; Position: absolut } .md-checkbox label { Cursor: pointer; padding-left: 30px; .md-checkbox label>span { display: block; -webkit-transition-duration: 0.2s; -duration: 0,2s; } .md-checkbox label>.check { top: -4px left: 6px; 10px; Höhe: 20px; Grenze-oben: keine; -webkit-transform: rotieren(180deg); rotieren (180 Grad); transform: rotieren (180 Grad); -webkit-transition-delay: 0,2 s; -moz-transition-delay: 0,2 s; .md-checkbox input[type=checkbox]:checked~label>.check { opacity: 1; -webkit-transform: scale(1) rotieren (45 Grad); -moz-transform: Scale(1) rotieren(45 Grad); .md-checkbox input[type=checkbox]:checked~label>.box { opacity: 0; -webkit-transform: scale(0) rotate(-180deg); -moz-transform: scale(0) rotate(-180deg ); transform: scale(0) rotate(-180deg); } .md-checkbox label>.box { top: 0px; border: 2px solid #666; Höhe: 20px; Z-Index: 0,2s; -moz-Übergangsverzögerung: 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>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.