<div>
<label><input class="btn-switch" type="checkbox"> 默认未选中</label>
<label><input class="btn-switch" type="checkbox" checked> 默认选中</label>
<label><input class="btn-switch btn-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加btn-switch-animbg类即可</label>
<label><input class="btn-switch btn-switch-animbg" type="checkbox" checked> 默认选中</label>
<label><input class="btn-switch btn-switch-anim" type="checkbox"> 默认未选中,过渡效果,加 btn-switch-anim
类即可</label>
<label><input class="btn-switch btn-switch-anim" type="checkbox" checked> 默认选中</label>
</div> css:
.btn-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; }
.btn-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left: 0;
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); }
.btn-switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63; }
.btn-switch:checked:before {
left: 21px; }
.btn-switch.btn-switch-animbg {
transition: background-color ease 0.4s; }
.btn-switch.btn-switch-animbg:before {
transition: left 0.3s; }
.btn-switch.btn-switch-animbg:checked {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: #64bd63;
transition: border-color 0.4s, background-color ease 0.4s; }
.btn-switch.btn-switch-animbg:checked:before {
transition: left 0.3s; }
.btn-switch.btn-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }
.btn-switch.btn-switch-anim:before {
transition: left 0.3s; }
.btn-switch.btn-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; }
.btn-switch.btn-switch-anim:checked:before {
transition: left 0.3s; }

												

仿ios按钮切换的更多相关文章

  1. 在uwp仿IOS的页面切换效果

    有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...

  2. Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  3. IOS开发中UIBarButtonItem上按钮切换或隐藏实现案例

    IOS开发中UIBarButtonItem上按钮切换或隐藏案例实现案例是本文要介绍的内容,这个代码例子的背景是:导航条右侧有个 edit button,左侧是 back button 和 add bu ...

  4. 自己定义控件:onDraw 方法实现仿 iOS 的开关效果

    概述 本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...

  5. Android-PickerView【仿iOS的PickerView控件,并封装了时间选择和选项选择这两种选择器】使用

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以git ...

  6. WPF C#仿ios 安卓 红点消息提示

    原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...

  7. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  8. (转载) Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

    Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框 标签: Android清除功能EditText仿IOS的输入框 2013-09-04 17:33 70865人阅读  ...

  9. react-native自定义Modal模态框|仿ios、微信弹窗RN版

    前序 纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验.如:微信.支付宝.ios都有很成熟的一套弹窗UI展示场景. 最近一直沉迷在rea ...

随机推荐

  1. tensorflow打印可用设备列表

    from tensorflow.python.client import device_libprint(device_lib.list_local_devices())

  2. codewars--js--Hamming Numbers

    问题描述: A Hamming number is a positive integer of the form 2i3j5k, for some non-negative integers i, j ...

  3. JS高阶编程技巧--compose函数

    先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...

  4. SRAM结构框图解

    SRAM 即静态RAM.它也由晶体管组成,SRAM的高速和静态特性使它们通常被用来作为Cache存储器.计算机的主板上都有Cache插座. 下图所示的是一个SRAM的结构框图. 由上图看出SRAM一般 ...

  5. sqli-labs-Basic Challenges

    sqli_labs注入学习 一.SQL基本语法 1.1show databases; 显示MySQL数据库里边所有的库: 1.2use [table name]; 使用特定的数据库: 1.3show ...

  6. 2020软件工程作业01 Deadline: 2020/03/07 20:00pm

    1.建立博客 https://github.com/smithLIUandhisbaby 20177572 https://www.cnblogs.com/smith324/ 2.回顾——我的初心 对 ...

  7. 如何实现广告响应式滚动 OwlCarousel2

    githu    https://github.com/OwlCarousel2/OwlCarousel2 OwlCarousel2 官方网址    http://owlcarousel2.githu ...

  8. MySQL 8 批处理模式

    shell> mysql -h host -u user -p < batch-file 强制执行脚本,即使某些语句参数错误,可以添加 --force 参数 如果MySQL运行在Windo ...

  9. 在C#中使用RESTful API的几种好方法

    什么是Restful API REST 即Representational State Transfer的缩写.直接翻译的意思是"表现层状态转化". 它是一种互联网应用程序的API ...

  10. 3个N加上各种运算符号结果等于6(纯属娱乐)C#

    网上的题目: 题有点难  但都有解 2    2    2  =  6 3    3    3  =  6 4    4    4  =  6 5    5    5  =  6 6    6     ...