CSS3实现自定义Checkbox特效实例代码


Posted in HTML / CSS onApril 24, 2017

前言

大家都知道CheckBox是在HTML中让使用者与首页上的素材发生交互作用的一种方法。所谓CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。最近在工作中遇到一个需求,需要自定义checkbox的样式,最终实现了好几种样式,所以想着分享出来给大家,有需要的朋友们可以参考学习,下面话不多说,来看看详细的介绍吧。

效果图如下

CSS3实现自定义Checkbox特效实例代码CSS3实现自定义Checkbox特效实例代码

实例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3自定义Checkbox特效</title>
</head>
<style type="text/css">
.tgl{display:none}
.tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tgl:after,.tgl:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tgl ::-moz-selection,.tgl :after::-moz-selection,.tgl :before::-moz-selection,.tgl+.tgl-btn::-moz-selection,.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection{background:0 0}
.tgl ::selection,.tgl :after::selection,.tgl :before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{background:0 0}
.tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer}
.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.tgl+.tgl-btn:after{left:0}
.tgl+.tgl-btn:before{display:none}
.tgl:checked+.tgl-btn:after{left:50%}


.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease}
.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ease;transition:all .2s ease}
.tgl-light:checked+.tgl-btn{background:#9FD6AE}


.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease;border:1px solid #e8eae9}
.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08)}
.tgl-ios+.tgl-btn:active{-webkit-box-shadow:inset 0 0 0 2em #e8eae9;box-shadow:inset 0 0 0 2em #e8eae9}
.tgl-ios+.tgl-btn:active:after{padding-right:.8em}
.tgl-ios:checked+.tgl-btn{background:#86d993}
.tgl-ios:checked+.tgl-btn:active{-webkit-box-shadow:none;box-shadow:none}
.tgl-ios:checked+.tgl-btn:active:after{margin-left:-.8em}


.tgl-skewed+.tgl-btn{overflow:hidden;-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;background:#888}
.tgl-skewed+.tgl-btn:after,.tgl-skewed+.tgl-btn:before{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);display:inline-block;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tgl-skewed+.tgl-btn:after{left:100%;content:attr(data-tg-on)}
.tgl-skewed+.tgl-btn:before{left:0;content:attr(data-tg-off)}
.tgl-skewed+.tgl-btn:active{background:#888}
.tgl-skewed+.tgl-btn:active:before{left:-10%}
.tgl-skewed:checked+.tgl-btn{background:#86d993}
.tgl-skewed:checked+.tgl-btn:before{left:-100%}
.tgl-skewed:checked+.tgl-btn:after{left:0}
.tgl-skewed:checked+.tgl-btn:active:after{left:10%}


.tgl-flat+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff;border:4px solid #f2f2f2;border-radius:2em}
.tgl-flat+.tgl-btn:after{-webkit-transition:all .2s ease;transition:all .2s ease;background:#f2f2f2;content:"";border-radius:1em}
.tgl-flat:checked+.tgl-btn{border:4px solid #7FC6A6}
.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7FC6A6}


.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;-ms-perspective:100px;perspective:100px}
.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}
.tgl-flip+.tgl-btn:after{content:attr(data-tg-on);background:#02C66F;-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.tgl-flip+.tgl-btn:before{background:#FF3A19;content:attr(data-tg-off)}
.tgl-flip+.tgl-btn:active:before{-webkit-transform:rotateY(-20deg);-ms-transform:rotateY(-20deg);transform:rotateY(-20deg)}
.tgl-flip:checked+.tgl-btn:before{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}
.tgl-flip:checked+.tgl-btn:after{-webkit-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0);left:0;background:#7FC6A6}
.tgl-flip:checked+.tgl-btn:active:after{-webkit-transform:rotateY(20deg);-ms-transform:rotateY(20deg);transform:rotateY(20deg)}
</style>

<body>

  <span class='tg-list-item'>
    <input class='tgl tgl-light' id='cb1' type='checkbox'>
    <label class='tgl-btn' for='cb1'></label>
  </span>

  <span class='tg-list-item'>
    <input class='tgl tgl-ios' id='cb2' type='checkbox'>
    <label class='tgl-btn' for='cb2'></label>
  </span>

  <span class='tg-list-item'>
    <input class='tgl tgl-skewed' id='cb3' type='checkbox'>
    <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'></label>
  </span>

  <span class='tg-list-item'>
    <input class='tgl tgl-flat' id='cb4' type='checkbox'>
    <label class='tgl-btn' for='cb4'></label>
  </span>
  
  <span class='tg-list-item'>
    <input class='tgl tgl-flip' id='cb5' type='checkbox'>
    <label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label>
  </span>

</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
CSS3实现头像旋转效果
Mar 13 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
深入理解css中vertical-align属性
Apr 18 #HTML / CSS
总结30个CSS3选择器
Apr 13 #HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 #HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 #HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 #HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 #HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 #HTML / CSS
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
AutoSave/自动存储功能实现
2007/03/24 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
fastadmin中调用js的方法
2019/05/14 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Python while 循环使用的简单实例
2016/06/08 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
总经理的岗位职责
2014/02/23 职场文书
网站客服岗位职责
2014/04/05 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript