Este artículo presenta el código de efectos especiales de la casilla de verificación de una forma nativa H5 y se comparte con todos. Los detalles son los siguientes:
El efecto es el siguiente:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox { margen: 50px posición: relativa; tamaño de fuente: 14px; } .md-checkbox etiqueta>span.inc { -webkit-animation: growCircle 0.2s facilidad; growCircle 0.2s facilidad; animación: growCircle 0.2s facilidad; } @keyframes growCircle { 0%, 100% { transformar: escala (0); opacidad: 0,8 { fondo: #eee; } } .md-checkbox etiqueta>span.inc { fondo: #fff izquierda: -20px arriba; -20px; altura: 60px; ancho: 60px; opacidad: 0; radio de borde: 50%! importante; md-checkbox input[tipo=casilla de verificación] {visibilidad: oculta; posición: absoluta} .md-checkbox label {cursor: puntero; relleno-izquierda: 30px; } .md-checkbox label>span { display: block; posición: absoluta; -webkit-transition-duration: 0.2s; -duración: 0,2 s; } .md-checkbox etiqueta>.check {arriba: -4px izquierda: 6px; 10px; altura: 20px; borde: 2px sólido #26A69A; borde superior: ninguno; borde izquierdo: ninguno; índice z: 5; -webkit-transform: rotar (180 grados); rotar (180 grados); transformar: rotar (180 grados); -webkit-transition-delay: 0,2 s; -moz-transition-delay: 0.2s; transición-delay: 0.2s; } .md-checkbox input[type=checkbox]:checked~label>.check { opacidad: 1; -webkit-transform: escala(1) rotar (45 grados); -moz-transform: escala (1) rotar (45 grados); .md-checkbox input[tipo=casilla de verificación]:marcado~etiqueta>.box { opacidad: 0; -webkit-transform: escala(0) rotar(-180deg); -moz-transform: escala(0) rotar(-180deg); ); transformar: escala(0) rotar(-180deg); } .md-checkbox etiqueta>.box { superior: 0px borde: 2px sólido; #666; alto: 20px; ancho: 20px; índice z: 5; -retraso de transición de webkit: 0,2 s; -moz-retraso de transición: 0,2 s; /head> <cuerpo> <div clase=md-checkbox> <tipo de entrada=casilla de verificación id=prueba clase=md-check /> <etiqueta para=prueba> <span></span> <span class=check></span> <span class=box></span> Opción 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>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.