分享一个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对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php简单实现MVC
2015/02/05 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
用Python制作音乐海报
2021/01/26 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
简历的自我评价
2014/02/03 职场文书
维修工先进事迹
2014/05/29 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
家长给老师的感谢信
2015/01/20 职场文书
三峡大坝导游词
2015/01/31 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android