纯css3 开关按钮

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>CSS3自定义Checkbox特效DEMO演示</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:;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:}

.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:;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:;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:}

.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:;color:#fff;position:absolute;top:;left:;-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:;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>

纯css3 开关按钮的更多相关文章

纯CSS3左右滑动开关按钮
纯CSS3特效左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮,点击按钮可以左右滑动,就像开关打开闭合一样的效果. http://www.huiyi8.com/sc/10626.html
8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体效果展示手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

随机推荐

<<SAP内存计算——HANA>> 书评
<SAP内存计算——HANA>又是一本在地铁里读完的书,最近阅读量大增,都是托了地铁的福了. 一年多以前就在ITPUB里发过帖子问“SAP HANA归根揭底到底是什么?”,那时通过一些网络 ...
poj3041-Asteroids , 二分图的最小顶点覆盖数 = 最大匹配数
点击打开链接 Konig定理:二分图的最小顶点覆盖数 = 二分图的最大匹配数题意: 在N*N的网络中有K颗小行星.小行星i的位置是(Ri, Ci).如今有一个强力的武器可以用一发光束将一整行或一整列 ...
剑指 offer set 3 旋转数组的最小数字
总结 1. 没有重复元素的旋转数组可用 logn 时间内求出结果. 解法有两个步骤, 先是求出发生旋转的点(以 array[0] 为支点求得), 然后用正常的二分查找给出结果 2. 有重复元素元素的旋 ...
如何编写自己的Linux安全检查脚本？
因为本人工作中要涉及到很多东西,审计(日志.数据神马的).源代码审计.渗透测试.开发一大堆东西,有些东西,越是深入去做,越会发现,没有工具或脚本,工作起来是有多么的坑. 工作的这段时间,自己写了几个工 ...
Python笔记（一）
我是一名211高校软件工程大三学生,由于前段时间一直在找实习公司.笔试面试了很多公司,虽然有一定的基础,但是还是被某些公司面试官像虐狗一样的虐了.最后找到了一个口碑比较好的外企,主攻信息安全方面.这段 ...
Gradle实战：不同编译类型的包同设备共存
查看原文:http://blog.csdn.net/u010818425/article/details/52335844 Gradle实战系列文章: <Gradle基本知识点与常用配置> ...
重构9-Extract Interface（提取接口）
我们来介绍一个常常被忽视的重构:提取接口.如果你发现多于一个类使用另外一个类的某些方法,引入接口解除这种依赖往往十分有用.该重构实现起来非常简单,并且能够享受到松耦合带来的好处. public cla ...
Oracle基础（十二）数学函数
数学函数: ABS(n):求绝对值 ),) FROM DUAL; --获取15的绝对值结果:, BITAND(X,Y):返回X,Y进行位与(AND)的运算结果 ,), BITAND(,), BITA ...
不错的jQuery图表插件 .
很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...

纯css3 开关按钮

纯css3 开关按钮的更多相关文章

随机推荐

热门专题