展示效果:

首先是html

<div class="container">
<div class="bg_con">
<input id="checked_1" type="checkbox" class="switch" />
<label for="checked_1"></label>
</div>
</div>

然后是css

.bg_con .switch{
display:none;
}
.bg_con label{
position:relative;
display: block;
padding: 1px;
border-radius: 24px;
height: 22px;
margin-bottom: 15px;
background-color: #eee;
cursor: pointer;
vertical-align: top;
-webkit-user-select: none;
width: 40px;
}
.bg_con label:before{
content: '';
display: block;
border-radius: 24px;
height: 22px;
background-color: white;
-webkit-transform: scale(1, 1);
-webkit-transition: all 0.3s ease;
}
.bg_con label:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -11px;
width: 22px;
height: 22px;
border-radius: 22px;
background-color: white;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
-webkit-transform: translateX(-9px);
-webkit-transition: all 0.3s ease;
}
.bg_con .switch:checked~label:after{
-webkit-transform: translateX(9px);
} .bg_con .switch:checked~label:before{
background-color:green;
}

css3 移动端 开关效果的更多相关文章

  1. css3实现switch开关效果

    之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 <div class="container"> <div class="bg_ ...

  2. css3 iphone开关 移动端开关、按钮、input

    css3  iphone开关  移动端开关.按钮.input <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  4. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  5. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  6. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  8. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  9. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

随机推荐

  1. or1200处理器的异常处理类指令介绍

    下面内容摘自<步步惊芯--软核处理器内部设计分析>一书 我们在计算机体系结构的学习中知道:中断实质上包含由外部事件引起的硬中断(又称外中断)和由内部预先安排的特定指令或内部异常引起的软中断 ...

  2. JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...

  3. nat的翻译类型(2)--动态nat

    目的:在1.1 1.2 1.3 三台内网的服务器访问外网的服务器(202.1.1.2)时,将内网ip转换为外网ip. 1.设置内网三台服务器的Ip ,网关,以及外网服务器的ip网关 分别为:192.1 ...

  4. Cannot open url. please check this url is correct

    启动tomcat报错如下 任务管理器 kill 掉所有java进程,在配置中选中After launch选项 要是还是不行,那就无解,只能重启电脑.

  5. ASP.NET.Core中使用AutoMapper

      首先需要在NuGet中引用AutoMapper的类库 install-package AutoMapper install-package AutoMapper.Extensions.Micros ...

  6. 分组查询限制。HAVING可写在GROUP BY前。

    限制一.无GROUP BY时统计函数不能和字段同时出现: 限制二.有GROUP BY时字段部分只能出现分组的字段: 限制三.统计函数嵌套时不能有字段.

  7. 配置程序成为Linux服务

    最近写了个程序需要随Linux启动时自动运行起来, 查了一些方法后, 通过配置程序成为系统的服务实现了这个需求, 在此记录一下. 测试程序 #! /bin/sh while [ true ] do e ...

  8. cors解决Web跨域访问问题

    首先了解一下什么是跨域以及解决的几种常见方式. 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同. 举例: 相对于 ...

  9. DNS 域名系统的简介

    一.DNS域名系统简介 1.网络中为了区别各个主机,必须为每台主机分配一个唯一的地址, 这个地址即称为“IP 地址.但这些数字难以记忆, 所以采用“域名” 的方式来取代这些数字. 2.当某台主机要与其 ...

  10. Nginx (二) Nginx的反向代理负载均衡以及日志切割

    Nginx是一个高并发,高性能的服务器,可以进行反向代理以及网站的负载均衡.这些功能的运用都在配置文件中,也就是Nginx安装目录下的conf/nginx.conf. nginx.conf 1. 先来 ...