仿ios按钮切换
<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按钮切换的更多相关文章
- 在uwp仿IOS的页面切换效果
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...
- Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像
此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...
- IOS开发中UIBarButtonItem上按钮切换或隐藏实现案例
IOS开发中UIBarButtonItem上按钮切换或隐藏案例实现案例是本文要介绍的内容,这个代码例子的背景是:导航条右侧有个 edit button,左侧是 back button 和 add bu ...
- 自己定义控件:onDraw 方法实现仿 iOS 的开关效果
概述 本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...
- Android-PickerView【仿iOS的PickerView控件,并封装了时间选择和选项选择这两种选择器】使用
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以git ...
- WPF C#仿ios 安卓 红点消息提示
原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- (转载) Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框
Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框 标签: Android清除功能EditText仿IOS的输入框 2013-09-04 17:33 70865人阅读 ...
- react-native自定义Modal模态框|仿ios、微信弹窗RN版
前序 纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验.如:微信.支付宝.ios都有很成熟的一套弹窗UI展示场景. 最近一直沉迷在rea ...
随机推荐
- tensorflow打印可用设备列表
from tensorflow.python.client import device_libprint(device_lib.list_local_devices())
- codewars--js--Hamming Numbers
问题描述: A Hamming number is a positive integer of the form 2i3j5k, for some non-negative integers i, j ...
- JS高阶编程技巧--compose函数
先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...
- SRAM结构框图解
SRAM 即静态RAM.它也由晶体管组成,SRAM的高速和静态特性使它们通常被用来作为Cache存储器.计算机的主板上都有Cache插座. 下图所示的是一个SRAM的结构框图. 由上图看出SRAM一般 ...
- sqli-labs-Basic Challenges
sqli_labs注入学习 一.SQL基本语法 1.1show databases; 显示MySQL数据库里边所有的库: 1.2use [table name]; 使用特定的数据库: 1.3show ...
- 2020软件工程作业01 Deadline: 2020/03/07 20:00pm
1.建立博客 https://github.com/smithLIUandhisbaby 20177572 https://www.cnblogs.com/smith324/ 2.回顾——我的初心 对 ...
- 如何实现广告响应式滚动 OwlCarousel2
githu https://github.com/OwlCarousel2/OwlCarousel2 OwlCarousel2 官方网址 http://owlcarousel2.githu ...
- MySQL 8 批处理模式
shell> mysql -h host -u user -p < batch-file 强制执行脚本,即使某些语句参数错误,可以添加 --force 参数 如果MySQL运行在Windo ...
- 在C#中使用RESTful API的几种好方法
什么是Restful API REST 即Representational State Transfer的缩写.直接翻译的意思是"表现层状态转化". 它是一种互联网应用程序的API ...
- 3个N加上各种运算符号结果等于6(纯属娱乐)C#
网上的题目: 题有点难 但都有解 2 2 2 = 6 3 3 3 = 6 4 4 4 = 6 5 5 5 = 6 6 6 ...