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

这篇文章主要介绍了分享一个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>

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