添加表单的复选框的HTML代码,分享一个H5原生form表单的checkbox特效代码

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

效果如下：

.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;

}

Option 1

var list = document.getElementsByTagName('input');

for(var i =0;i

(function(n){

list[n].addEventListener('click',function(e){

var inc = this.nextElementSibling.firstElementChild;

inc.className = '';

setTimeout(function(){

inc.className = 'inc';

},0);

})

})(i)

}

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