html:

<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中,过渡效果,加 mui-switch-anim
类即可</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>

css:

.mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none; }
.mui-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left:;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.mui-switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63; }
.mui-switch:checked:before {
left: 21px; }
.mui-switch.mui-switch-animbg {
transition: background-color ease 0.4s; }
.mui-switch.mui-switch-animbg:before {
transition: left 0.3s; }
.mui-switch.mui-switch-animbg:checked {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: #64bd63;
transition: border-color 0.4s, background-color ease 0.4s; }
.mui-switch.mui-switch-animbg:checked:before {
transition: left 0.3s; }
.mui-switch.mui-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }
.mui-switch.mui-switch-anim:before {
transition: left 0.3s; }
.mui-switch.mui-switch-anim:checked {
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }
.mui-switch.mui-switch-anim:checked:before {
transition: left 0.3s; }

原文路径:http://www.css88.com/archives/5693

css---switch开关的更多相关文章

  1. CSS做一个Switch开关

    本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...

  2. 使用css3 制作switch开关

    使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...

  3. 微信小程序组件解读和分析:十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  4. 自定义switch开关

    自定义一个switch开关 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. mui的switch开关的应用

    HTML: <!--mui的switch开关--> <div class="mui-content-padded"> <h5>switch开关m ...

  6. elementui switch 开关,点击确认按钮后在进行开关

    <el-table-column label="上头条" align="center"> <template slot-scope=" ...

  7. 微信小程序 主题皮肤切换(switch开关)

    示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...

  8. mui switch(开关)里面token不能及时更新

    做登录的时候再本地用locaStorage存了一个token值,但是登录之后进入页面里面发现一个switch开关里面的token值会跟着开关的切换在上一个token和当前的这个token值之间切换,我 ...

  9. 纯css实现 switch开关

    <!-- 直接看代码,利用了css3兄弟选择器 --><!-- html --> <button class="switch"> <inp ...

  10. css代码实现switch开关滑动

    效果预览: 代码如下: <style> #toggle-button{ display: none; } .button-label{ position: relative; displa ...

随机推荐

  1. js拼接HTML onclick传参,,页面转义符

    字符串 1 使用" .比如: ("'+key+'")例: htmlStr = htmlStr + '<span><img src="'+src ...

  2. Android开发 navigation入门详解

    前言 Google 在2018年推出了 Android Jetpack,在Jetpack里有一种管理fragment的新架构模式,那就是navigation. 字面意思是导航,但是除了做APP引导页面 ...

  3. Java 基础 - 原生类型

    更详细的说明,请参考: Java 原生类型与包装器类型深度剖析,https://blog.csdn.net/justloveyou_/article/details/52651211 一. 原生类型与 ...

  4. ASCII, Unicode 与 UTF-8

    1,ASCII 由于计算机是美国人发明的,最早只有127个字符,即大小写英文字母.数字.一些符号,被编码到计算机里,这个编码表就是ASCII表.这时每个字符用1 Byte表示. 2,Unicode 当 ...

  5. [JZOJ3402] 【GDOI2014模拟】Pty的字符串

    题目 给你一棵每条边从父亲指向儿子的树,每条边上面有一个字母. 从树上的任意一点出发,走出的路径就是对应一个子串. (这不是\(Trie\),因为每个父亲可能会连出字母相同的边) 再给你一个字符串\( ...

  6. 给大家介绍一下linux系统高级命令

    输出重定向(mip.0834jl.com) ;覆盖文件内容 回声' 123 ' 测试;覆盖原始内容 回声' 123 ' 测试;原始存在(共存) echo 'ken2 '(www.jl0834.com) ...

  7. 不会在CentOS 8上安装htop?今天教你正确安装

    它显示有关CPU和RAM利用率,正在执行的任务,平均负载和正常运行时间的信息.另外,htop显示所有正在运行的进程的列表,并且还可以树状格式显示这些进程. htop优于top的优势包括 以颜色标记输出 ...

  8. npm与cnpm两者之间的区别是什么?

    NPM(节点包管理器)是节点的包管理器,用于管理节点插件(包括安装.卸载和管理依赖关系等).).NPM是一个软件包管理工具,安装在新版本的节点上,所以我们需要安装节点. NPM的常用场景(http:/ ...

  9. Swig c++=>C#

    1.下载swig https://sourceforge.net/projects/swig/files/ 2.配置环境变量 path 添加你的swig路径 3.创建项目解决方案和一个win32 dl ...

  10. BZOJ 1087(SCOI 2005) 互不侵犯

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec Memory Limit: 162 MB Submit: 5333 Solved: 3101 [Submit][ ...