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


Posted in HTML / CSS onFebruary 26, 2018

本文介绍了分享一个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 圆角效果
Jul 15 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 #HTML / CSS
canvas基础之图形验证码的示例
Jan 02 #HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 #HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 #HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 #HTML / CSS
详解Html5原生拖拽操作
Jan 12 #HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 #HTML / CSS
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
JS实现复制功能
2017/03/01 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python的面向对象思想分析
2015/01/14 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python调用Redis的示例代码
2020/11/24 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
电大毕业生自我鉴定
2013/11/10 职场文书
道德模范先进事迹
2014/02/14 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
体育课课后反思
2014/04/24 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2015年电工工作总结
2015/04/10 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
Python中22个万用公式的小结
2021/07/21 Python
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python