这篇文章主要介绍H5原生fORM表单如何使实现checkbox特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果如下：<!DOCTYPE html> <
这篇文章主要介绍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特效”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！
--结束END--
本文标题: H5原生form表单如何使实现checkbox特效
本文链接: https://www.lsjlt.com/news/69408.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0