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{
CSS3模拟IOS滑动开关相关推荐
- 百度推出开发者搜索 Beta;雷军手机使用时长曝光;苹果败诉,电脑上可以模拟 iOS 系统 | 极客头条...
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 丁恩华 出品 | CSDN(ID:CSDNnews ...
- Css3模拟彩色灯光
Css3模拟彩色灯光 开发工具与关键技术:DW前端 作者:盘子 撰写时间:2019年2月18日 下面来分享下一个简单而又好看的彩色灯光样式,源代码部分,见如下截图: 源代码部分所敲的代码很简洁,从此处 ...
- 【键盘】jQuery+CSS3模拟键盘事件(精)
jQuery+CSS3模拟键盘事件是一款基于jQuery的模拟键盘事件的应用,键盘上除了功能键,其他键都可以用这款插件来模拟.当你敲击键盘上的键时,这款应用会帮助你获取到这个键的事件,并在页面上的模拟 ...
- HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?
转眼从2005年到现在,<亮剑>已经播出多年,但热度依然不减,而且每次重温我都会看出不一样的意蕴,今天,我就用HTML5+CSS3模拟实现<亮剑>平安县城一役精彩微信群聊-谁开 ...
- Chrome浏览器免插件更改Ua模拟iOS和Android等教程,附QQ和微信
Chrome浏览器免插件更改Ua模拟iOS和Android等教程,附QQ和微信 .. http://www.zuanke8.com/thread-1798313-1-1.html (出处: 赚客吧) ...
- html5模拟点击事件,css3模拟jq点击事件的实例代码
今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签 ...
- JavaScript css3模拟简单的视频弹幕功能
最近相对比较空闲,想写一些东西写着玩.就尝试写了一个demo模拟了最简单的视频弹幕功能~~. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用 ...
- python 模拟ios提交网络_使用Xcode + Python进行IOS运动轨迹模拟
前言 在某些app中,需要根据用户的实时位置来完成某些事件 例如跑步打卡软件(步道乐跑).考勤打卡软件(叮叮).某些基于实时位置的游戏(Pokemon Go.一起来捉妖) 一般解决办法是通过使用安卓模 ...
- 纯css3模拟龙卷风动画js特效
下载地址 纯css3代码实现的龙卷风特效,css模拟龙卷风动画代码. dd:
最新文章
- Windows程序设计学习笔记(1):一个简单的windows程序
- Django使用数据库(Mariadb/Mysql)
- SQLyog中TAB键设置四个空格的步骤
- 【网页前端设计Front end】JavaScript教程.上(看不懂你来打我)
- linux添加root级别账户
- 【Android 属性动画】属性动画 Property Animation 简介 ( 属性动画简介 | 属性动画特性 )
- MySQL的常见存储引擎介绍与参数设置调优
- 开启及关闭go mod
- tf 从RNN到BERT
- boost::local_time模块实现创建各种dst_calc_rule的测试程序
- vue之父子组件通信
- php 合并两个数组并去重,合并两个数组 以KEY 作为键
- 艾拉物联CEO :物联网时代的到来让安全问题显得尤为突出
- java oo 封装_Java从小白到入门,Day6。JAVAOO-封装
- 启动Hadoop时候datanode没有启动的原因及解决方案
- 操作两个表的SQL语句,可用在数据源中
- 机器人仿真 软件 V-REP 入门教程 (一)简介
- win10 下 acdsee7 在普通账户下无法运行并崩溃的 BUG
- 关于CREO图纸导出到CAD后尺寸不对的问题
- 计算机专业的研究方向