CSS3模拟IOS滑动开关
前言
H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3模拟IOS开关</title>
<style type="text/css" media="screen">
/* ==========================================================================
设置根元素字体大小
========================================================================== */
html {
font-size: 100px;
}
/* ==========================================================================
设置模拟元素的包裹层,装饰...毫无卵用
========================================================================== */
.ios-checkbox{
height:4rem;
width:4rem;
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
border:.05rem dashed #3DB7A9;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
-webkit-justify-content:space-around;
-ms-flex-pack:distribute;
justify-content:space-around;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
/* ==========================================================================
label标签模拟按钮
========================================================================== */
.emulate-ios-button {
display: block;
width: 2rem;
height: 1rem;
background: #ccc;
border-radius: 5rem;
cursor: pointer;
position: relative;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
/* ==========================================================================
设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
translateZ来强制启用硬件渲染
========================================================================== */
.emulate-ios-button:after {
content: '';
display: block;
width: .9rem;
height: .9rem;
border-radius: 100%;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
position: absolute;
left: .05rem;
top: .05rem;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.emulate-ios-button:active:after {
width: 1.1rem;
}
/* ==========================================================================
设置raw-checkbox,视觉直观比较
========================================================================== */
.raw-checkbox{
height:2rem;
width:2rem;
}
.raw-checkbox:checked+label {
background: #34bf49;
}
/* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
.raw-checkbox:checked+label:after {
left: 1.05rem;
}
.raw-checkbox:checked+label:active:after {
left: .5rem;
}
.raw-checkbox:disabled+label {
background: #d5d5d5;
pointer-events: none;
}
.raw-checkbox:disabled+label:after {
background: #bcbdbc;
}
</style>
</head>
<body>
<div class="ios-checkbox">
<input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">
<label for="ios-checkbox" class="emulate-ios-button"></label>
</div>
</body>
</html>
总结
为了更直观的比较,raw checkbox我就没有隐藏了..~~~~
CSS3模拟IOS滑动开关的更多相关文章
- css3模拟jq点击事件
还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...
- 纯CSS3模拟星体旋转效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3 模拟标牌震荡效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 在云中生成和模拟 iOS
原文:在云中生成和模拟 iOS 1.原文地址 https://msdn.microsoft.com/zh-cn/library/vs/alm/dn858446.aspx
- 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动
今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...
- 模拟iOS系统原生导航条隐藏或显示动画
借UIView动画,使更改导航条的hidden属性这一过程动起来.悦德财富:https://yuedecaifu.com 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- CSS3 模拟笑脸
参考 http://www.html5tricks.com/demo/html5-css3-smile-face/index.html 它还做了舌头... 一开始我都是用JS实现的动画 当然了 眼 ...
- 模拟ios应用加载页面
1:设置应用程序系统主界面加载接口为空:Main interface=null; 2: 在AppDelegate实现didFinishLaunchingWithOptions方法 - (BOOL)ap ...
- 分享10款激发灵感的最新HTML5/CSS3应用
1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...
随机推荐
- nmap命令扫描存活主机
1.ping扫描:扫描192.168.0.0/24网段上有哪些主机是存活的: [root@laolinux ~]# nmap -sP 192.168.0.0/24 Starting Nmap 4. ...
- 利用PowerDesigner逆向工程导出PDM模型及生成文档
原文:利用PowerDesigner逆向工程导出PDM模型及生成文档 最近需要对老项目进行重构优化,由于项目都是好几年前的,相关设计资料很不全,最基本的数据库设计文档都没有,只能利用PowerDesi ...
- 评估后Vista时代系统内核模式安全性
Windows Vista与之前的MS Windows版本(包括WindowsXPSP2)相比增加了很多的安全性.Vista新安全性的特征可以包括以下几个方面: 驱动签名 路径保护 内核模式代码完整性 ...
- .NET开发时让人头痛的SESSION超时
前言 不知道大家在使用用.NET的SESSION的时候有没有遇到过很奇怪的问题,不时候不知道怎么回事,这个SESSION就无缘无故的丢失了 怎么也想不通,不是说SESSION很可靠的吗?这个问题要好好 ...
- LoadRunner 11破解方法
名称:HP Loadrunner Software 11.00 版本号:11.00.0.0 安装环境:Win 7 软件安装成功后,会弹出提示告知license的有效期为10天. 破解方法: 1.下载破 ...
- dependency or constituency
what's dependenct or constituency involved in a sentence? In linguistics, when it comes to sentence ...
- java EE技术体系——CLF平台API开发注意事项（3）——API安全访问控制
前言:提离职了,嗯,这么多年了,真到了提离职的时候,心情真的很复杂.好吧,离职阶段需要把一些项目中的情况说明白讲清楚,这篇博客就简单说一下在平台中对API所做的安全处理(后面讲网关还要说,这里主要讲代 ...
- 用SVGDeveloper制作svg地图
项目中需要实现巴蜀地区图,并且将其分为川东.川西.川南.川北四个区域,鼠标悬浮对应区域的区块改变颜色.经过网上查询资料,并未找到现成的区域图,于是就利用SVGDeveloper工具绘制. 一.绘制地图 ...
- [SCOI2011]糖果 (差分约束)
题目链接 Solution 差分约束乱搞就好了. 需要注意的地方: 对于大于等于的直接联等于,应为等于,因为对于我满足条件而言,等于总是最好的. 对于等于的,注意要建双向边. 然后要开 \(long~ ...
- [AHOI2008]逆序对（dp）
小可可和小卡卡想到Y岛上旅游,但是他们不知道Y岛有多远.好在,他们找到一本古老的书,上面是这样说的: 下面是N个正整数,每个都在1~K之间.如果有两个数A和B,A在B左边且A大于B,我们就称这两个数为 ...