源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5源码 > 资讯报道 > 网页制作 > 分享一个H5原生form表单的checkbox特效代码

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

作者:zy来源:未知浏览:时间:2018-03-13 11:04我要评论
这篇文章主要介绍了分享一个H5原生form表单的checkbox特效代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧!

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

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

 

相关文章
网友对“分享一个H5原生form表单的checkbox特效代码”的评论
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话