Este artigo apresenta o código de efeitos especiais da caixa de seleção de um formulário nativo H5 e é compartilhado com todos. Os detalhes são os seguintes:
O efeito é o seguinte:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox {margem: 50px; 14px; } .md-checkbox label>span.inc { -webkit-animation: growCircle 0.2s facilidade; animação de facilidade de growCircle 0,2s: facilidade de growCircle 0,2s; } } .md-checkbox label>span.inc { background: #fff; esquerda: -20px superior: -20px; altura: 60px; largura: 60px; raio da borda: 50% !importante; md-checkbox input[type=checkbox] {visibilidade: posição oculta: absoluta } .md-checkbox label { cursor: ponteiro; preenchimento à esquerda: 30px; -webkit-transição-duração: 0,2s; -duração: 0,2s; } .md-checkbox label>.check { superior: -4px esquerda: 6px; 10px; altura: 20px; borda: 2px sólido #26A69A; borda esquerda: nenhuma; índice z: 5; girar (180 graus); transformar: girar (180 graus); -moz-transition-delay: 0,2s; atraso de transição: 0,2s; .md-checkbox input[type=checkbox]:checked~label>.check { opacidade: 1; (45 graus); -moz-transform: escala (1) girar (45 graus); .md-checkbox input[type=checkbox]:checked~label>.box { opacidade: 0; -webkit-transform: escala(0) girar(-180deg); ); transformar: escala(0) girar(-180deg } .md-checkbox label>.box { topo: 0px borda: 2px sólido; #666; altura: 20px; largura: 20px; atraso de transição: 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> Opção 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>O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.