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去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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 allow_url_include的应用和解释
2010/04/22 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
5 cool javascript apps
2007/03/24 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Ionic2开发环境搭建教程
2020/08/20 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python学生管理系统的实现
2020/04/05 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
为什么需要版本控制
2016/10/28 面试题
《青蛙看海》教学反思
2014/04/23 职场文书
产品发布会策划方案
2014/05/12 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python