分享一个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实现图片翻牌特效
Mar 10 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript入门基础
2015/08/12 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
React组件生命周期详解
2017/07/03 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
appium+python adb常用命令分享
2020/03/06 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
经理秘书岗位职责
2013/11/14 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
户外婚礼策划方案
2014/02/08 职场文书
《中华少年》教学反思
2014/02/15 职场文书
化妆品活动策划方案
2014/05/23 职场文书
银行求职信范文
2014/05/26 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
观后感格式
2015/06/19 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android