5种纯CSS状态切换按钮开关 css3

于 2018-12-10 16:57:58 发布
阅读量871 收藏 1
点赞数

<html>

<head>

    <meta charset="utf-8">

    <title>5种纯CSS状态切换按钮开关</title>

<style type="text/css">

html,

body {

  background-color: #272727;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  min-height: 100%;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;

}



ul,

li {

  list-style: none;

  margin: 0;

  padding: 0;

}



.tg-list {

  text-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

}



.tg-list-item {

  margin: 0 2em;

}



h2 {

  color: #777;

}



h4 {

  color: #999;

}



.tgl {

  display: none;

}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {

  box-sizing: border-box;

}

.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {

  background: none;

}

.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {

  background: none;

}

.tgl + .tgl-btn {

  outline: 0;

  display: block;

  width: 4em;

  height: 2em;

  position: relative;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

.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 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;

  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);

}

.tgl-ios + .tgl-btn:hover:after {

  will-change: padding;

}

.tgl-ios + .tgl-btn:active {

  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 {

  box-shadow: none;

}

.tgl-ios:checked + .tgl-btn:active:after {

  margin-left: -.8em;

}



.tgl-skewed + .tgl-btn {

  overflow: hidden;

  -webkit-transform: skew(-10deg);

          transform: skew(-10deg);

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  -webkit-transition: all .2s ease;

  transition: all .2s ease;

  background: #888;

}

.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {

  -webkit-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: bold;

  color: #fff;

  text-shadow: 0 1px 0 rgba(0, 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;

  -webkit-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: bold;

  color: #fff;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-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);

          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);

          transform: rotateY(-20deg);

}

.tgl-flip:checked + .tgl-btn:before {

  -webkit-transform: rotateY(180deg);

          transform: rotateY(180deg);

}

.tgl-flip:checked + .tgl-btn:after {

  -webkit-transform: rotateY(0);

          transform: rotateY(0);

  left: 0;

  background: #7FC6A6;

}

.tgl-flip:checked + .tgl-btn:active:after {

  -webkit-transform: rotateY(20deg);

          transform: rotateY(20deg);

}



    </style>

   

</head>

<body>

    <h2>5种纯CSS状态切换按钮开关</h2>

<ul class="tg-list">

  <li class="tg-list-item">

    <h4>轻亮</h4>

    <input class="tgl tgl-light" id="cb1" type="checkbox"/>

    <label class="tgl-btn" for="cb1"></label>

  </li>

  <li class="tg-list-item">

    <h4>苹果</h4>

    <input class="tgl tgl-ios" id="cb2" type="checkbox"/>

    <label class="tgl-btn" for="cb2"></label>

  </li>

  <li class="tg-list-item">

    <h4>倾斜</h4>

    <input class="tgl tgl-skewed" id="cb3" type="checkbox"/>

    <label class="tgl-btn" data-tg-off="关" data-tg-on="开" for="cb3"></label>

  </li>

  <li class="tg-list-item">

    <h4>扁平</h4>

    <input class="tgl tgl-flat" id="cb4" type="checkbox"/>

    <label class="tgl-btn" for="cb4"></label>

  </li>

  <li class="tg-list-item">

    <h4>翻转</h4>

    <input class="tgl tgl-flip" id="cb5" type="checkbox"/>

    <label class="tgl-btn" data-tg-off="关" data-tg-on="开" for="cb5"></label>

  </li>

</ul>

</body>

</html>

提取码：9u9e 

附件下载
cpongo3
关注
博客
md语法模板。
11-02 1068
111111
博客
312312312
07-14 483
312312321312
博客
32132
07-14 365
131313123123
博客
312321312
07-12 298
31232131312
博客
【测试】看看文章
05-04 601
【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章【测试】看看文章
博客
Dubbo面试题2023年
02-06 1652
Dubbo面试题2023年
博客
试试文章类型
01-05 629
22222222222222
博客
​编译Proc编写的服务时，提示找不到头文件解决办法：sys_include=(/usr/include,/usr/lib/gcc-lib/i486-suse-linux/2.95.3/i
12-15 793
111
博客
tuxedo编译后台报错常见问题
12-15 399
1111111
博客
tuxedo编译后台报错常见问题
12-15 910
111111
博客
zdhadljaljdjadajdjald
04-14 467
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、
博客
【无标题】
03-24 484
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
博客
【无标题】
03-22 395
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
博客
【无标题】
03-15 333
欧拉函数原理一、欧拉函数的引入请思考以下问题：任意给定正整数n，请问在小于等于n的正整数之中，有多少个与n构成互质关系？（比如，在1到8之中，有多少个数与8构成互质关系？）计算这个值的方法就叫做欧拉函数，以φ(n)表示。在1到8之中，与8形成互质关系的是1、3、5、7，所以 φ(n) = 4。二、欧拉函数的定义定义： 欧拉函数φ(n)是一个定义在正整数集上得函数，φ(n)的值等于序列0，1，2，…，n-1中与n互素的数的个数。特别的，φ(1)=1（和1互质的数(小于等于1)就是1本身）。
博客
测试下图片的功能
03-15 397
基于嵌入的方法通常是在向量空间中表示KG，然后对于结果向量应用预先定义的评分函数来进行知识图谱补全。但是这种方法的弊端就是对于训练过程中存在的实体，可以有很好的训练效果，但是对于在训练过程中没有出现的实体，这种方法的效果就会变得很差。而在实际应用中，KG通常是在变化的，因此很容易出现在训练过程中并未见过的实体，会使得效果很差。例如在图中，实线部分是训练集，虚线部分是测试集。对于(Plato, lives, Greece)这一三元组，因为Plato，lives，Greece这三个向量都在训练过程...
博客
测试下显示图标
03-15 449
一.数据库介绍1.什么是数据库我们都知道文件可以储存数据，那我们为什么要用数据库呢？文件保存数据有以下几个缺点：文件的安全性问题文件不利于数据查询和管理文件不利于存储海量数据文件在程序中控制不方便为了解决上述问题，专家们设计出更加利于管理数据的软件——数据库，它能更有效的管理数据。数据库可以提供远程服务，即通过远程连接来使用数据库，因此也称为数据库服务器数据库 的 存储介质有：磁盘内存2.数据库的安装安装MySQL和环境配置都较简单，这里笔者不再赘述，附下安装教程，有需要的
博客
我不加入测试
03-15 357
统一OS，弹性部署一套操作系统，满足大大小小所有设备的需求，小到耳机，大到车机，智慧屏，手机等，让不同设备使用同一语言无缝沟通。硬件互助，资源共享搭载HarmonyOS 的每个设备都不是孤立的，在系统层让多终端融为一体，成为“超级终端”，终端之间能力互助共享，带来无缝协同体验。一次开发，多端部署开发者基于分布式应用框架，写一次逻辑代码，就可以部署在多种终端上。应用自由跨端HarmonyOS 原子化服务是轻量化服务的新物种，它提供了全新的服务和交互方式，可分可合，可流转，支持免安装
博客
使用的角度来讲
03-15 6562
安卓手机连接其他设备，不管从app开发方面，还有使用方面都非常麻烦，而且如果换一个第三方设备，还需要把发现，配对，连接，组合，验证的过程再次操作一遍。但是鸿蒙就非常简单了，从app开发方面，只要写很少的代码就可以调用第三方硬件，从使用的角度来讲，不管是多少设备连在一起，鸿蒙的终极目标是都能像使用一台设备那样简单。————————————————版权声明：本文为CSDN博主「是一只萨摩耶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://bl
博客
定义的评分函数
03-15 1253
基于嵌入的方法通常是在向量空间中表示KG，然后对于结果向量应用预先定义的评分函数来进行知识图谱补全。但是这种方法的弊端就是对于训练过程中存在的实体，可以有很好的训练效果，但是对于在训练过程中没有出现的实体，这种方法的效果就会变得很差。而在实际应用中，KG通常是在变化的，因此很容易出现在训练过程中并未见过的实体，会使得效果很差。例如在图中，实线部分是训练集，虚线部分是测试集。对于(Plato, lives, Greece)这一三元组，因为Plato，lives，Greece这三个向量都在训练过程中进行了反
博客
测试发文质量分
03-10 376
测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分测试发文质量分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值