分享一个H5原生form表单的checkbox特效代码
时间：2018-03-13 11:04作者：zy人气：402
这篇文章主要介绍了分享一个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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
相关下载
热门阅览
- 1精美漂亮网站引导页模板源码
- 2ECharts – 大数据时代必备的数据图表
- 3出现 XMlHttpRequest status:[500] Unknow status 的解决方法
- 4HTML5 Canvas画印章效果代码
- 5CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
- 6html网页判断手机还是电脑登陆进入
- 7HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
- 8让人惊叹的的创意404错误页面设计
- 9Html5实现二维码扫描并解析
- 10安装UCenter教程
- 11纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
- 12深入解析HTML的table表格标签与相关的换行问题
网友评论