H5原生form表单的checkbox特效代码有哪些？

来源：www.45fan.com 2018-03-18 15:28:43

本文介绍了分享一个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特效代码有哪些？

推荐阅读