南强小屋 Design By 杰米
本文介绍了分享一个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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无分享一个H5原生form表单的checkbox特效代码的评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？