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 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
我的论坛源代码(二)
2006/10/09 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
详解Python如何获取列表(List)的中位数
2016/08/12 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
金智子午JAVA面试题
2015/09/04 面试题
2015年民主生活会发言材料
2014/12/15 职场文书
辩论会主持词
2015/07/03 职场文书
大学副班长竞选稿
2015/11/21 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
python unittest单元测试的步骤分析
2021/08/02 Python