html switch开关实现隐藏,css3实现switch开关效果

之前阿里电面的时候问的一个问题，今天抽时间做了个demo。

html结构

css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。

.switch{

display:none;

}

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;

}

label:before{

content: '';

display: block;

border-radius: 24px;

height: 22px;

background-color: white;

-webkit-transform: scale(1, 1);

-webkit-transition: all 0.3s ease;

}

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;

}

.switch:checked~label:after{

-webkit-transform: translateX(9px);

}

.switch:checked~label:before{

background-color:green;

}

使用css3 制作switch开关

使用css3来实现switch开关的效果: html代码:

css3 移动端 开关效果

展示效果: 首先是html

微信小程序组件解读和分析：十五、switch 开关选择器

switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

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

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

微信小程序 主题皮肤切换(switch开关)

示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...

css3图片模糊过滤效果

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

基于css3的轮播效果

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

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

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

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

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

随机推荐

VC维含义

VC维含义的个人理解 有关于VC维可以在很多机器学习的理论中见到,它是一个重要的概念.在读的时候对一个实例不是很明白,通过这段时间观看斯坦福的机器学习公开课及相关补充材料, ...

JavaWeb学习之JSP常用标签、EL表达式的运算符、JSTL标签库(6)

1.JSP常用标签 * 只要支持JSP文件,常用标签有可以直接使用 * 格式: jsp:xxxx * jsp:forward ,完成jsp页面的转发 * page属性:转发的地址

Java遇见HTML——JSP篇之JavaWeb简介

一.什么是WEB应用程序 Web应用程序是一种可以通过Web(互联网)访问的应用程序.Web应用程序的一个最大好处是用户很容易访问应用程序.用户只需要有浏览器即可,不需要再安装其他软件. 为什么要学习 ...

openmpi出现Segmentation Fault而终止运算

欢迎关注我的社交账号: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://gith ...

call & apply

对于apply和call两者在作用上是相同的:这两个方法通常被用来类的继承和回调函数.但两者在参数上有区别的.call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this. ...

LeetCode Longest Common Prefix 最长公共前缀

题意:给多个字符串,返回这些字符串的最长公共前缀. 思路:直接逐个统计同一个位置上的字符有多少种,如果只有1种,那么就是该位是相同的,进入下一位比较.否则终止比较,返回前缀.可能有一个字符串会比较短, ...

unionId突然不能获取的踩坑记录

昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...

第二课：Hadoop集群环境配置

一.Yum配置 1.检查Yum是否安装 rpm -qa|grep yum 2.修改yum源,我使用的是163的镜像源(http://mirrors.163.com/),根据自己的系统选择源, #进入目 ...

SpringBoot+MyBatis+MySQL读写分离

1.  引言 读写分离要做的事情就是对于一条SQL该选择哪个数据库去执行,至于谁来做选择数据库这件事儿,无非两个,要么中间件帮我们做,要么程序自己做.因此,一般来讲,读写分离有两种实现方式.第一种是依 ...

PTA——数组平移

PTA 7-52 数组元素循环右移问题 #include int main(){ ]; int n,m,t,c; scanf("%d%d",&amp ...