分享一个H5原生form表单的checkbox特效代码

本文介绍了分享一个H5原生form表单的checkbox特效代码，分享给大家，具体如下：

效果如下：

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style>   .md-checkbox {    margin: 50px;    position: relative;    height: auto;    font-size: 14px;   }   .md-checkbox label>span.inc {    -webkit-animation: growCircle 0.2s ease;    -moz-animation: growCircle 0.2s ease;    animation: growCircle 0.2s ease;   }      @keyframes growCircle {    0%,    100% {     transform: scale(0);     opacity: 0.8;    }    70% {     background: #eee;     transform: scale(1.25);    }   }      .md-checkbox label>span.inc {    background: #fff;    left: -20px;    top: -20px;    height: 60px;    width: 60px;    opacity: 0;    border-radius: 50% !important;    -moz-border-radius: 50% !important;    -webkit-border-radius: 50% !important;   }      .md-checkbox input[type=checkbox] {    visibility: hidden;    position: absolute;   }      .md-checkbox label {    cursor: pointer;    padding-left: 30px;   }      .md-checkbox label>span {    display: block;    position: absolute;    left: 0;    -webkit-transition-duration: 0.2s;    -moz-transition-duration: 0.2s;    transition-duration: 0.2s;   }      .md-checkbox label>.check {    top: -4px;    left: 6px;    width: 10px;    height: 20px;    border: 2px solid #26A69A;    border-top: none;    border-left: none;    opacity: 0;    z-index: 5;    -webkit-transform: rotate(180deg);    -moz-transform: rotate(180deg);    transform: rotate(180deg);    -webkit-transition-delay: 0.2s;    -moz-transition-delay: 0.2s;    transition-delay: 0.2s;   }      .md-checkbox input[type=checkbox]:checked~label>.check {    opacity: 1;    -webkit-transform: scale(1) rotate(45deg);    -moz-transform: scale(1) rotate(45deg);    transform: scale(1) rotate(45deg);   }      .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;    height: 20px;    width: 20px;    z-index: 5;    -webkit-transition-delay: 0.2s;    -moz-transition-delay: 0.2s;    transition-delay: 0.2s;   }  </style> </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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

分享一个H5原生form表单的checkbox特效代码