使用css3 制作switch开关
使用css3来实现switch开关的效果:
html代码:
<!--switch开关-->
<div class="switch-btn">
<input type='checkbox' id='switchs' checked class='switch-checkbox'>
<label for='switchs' class='switch-left'></label>
<label for='switchs' class='switch-right'></label>
</div>
label标签for属性的作用:将for属性值与input 中id值相等的标签关联起来,当点击label标签时,如radio,checkbox会随之选中或者不选中
css代码:
.switch-btn{
position: relative;
}
.switch-btn .switch-checkbox{
display:none;
}
.switch-btn .switch-left{
display: block;
width: 1.5rem;
height: 1.5rem;
left: 1.5rem;
top: 0;
border-radius: 50%;
position: absolute;
transition: 0.4s;
background: #fff;
z-index: 1;
box-shadow: 1px 1px 2px #ccc;
}
.switch-btn .switch-checkbox:checked + .switch-left{
left:0px;
box-shadow:-1px 1px 2px #ccc;
}
.switch-btn .switch-right{
display: block;
width: 3rem;
top: 0;
height: 1.5rem;
border-radius: 1rem;
transition: 0.4s;
background: #999;
position: absolute;
}
.switch-btn .switch-checkbox:checked + .switch-left + .switch-right{
background: #04BE02;
transition:0.4s;
}
transform(变形,转换)http://www.w3school.com.cn/cssref/pr_transform.asp
transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,translateX和translateY以此类推。
transition(过渡)http://www.w3school.com.cn/css3/css3_transition.asp
transition的属性值包括:transition-property(过渡属性名 all 必填),transition-duration(过渡周期时间 0.3s 必填),transition-timing-function(过渡方式 ease 必填),transition-delay(延迟时间 选填)
说明:.switch-checkbox:checked + .switch-left (.switch-checkbox 被选中的时候后面的兄弟元素 设置.switch-left样式)
http://www.w3school.com.cn/cssref/selector_gen_sibling.asp
<script>
//使用onchange事件,获取当前是否是checked
var checkSwitch= document.getElementById('switchs');
checkSwitch.onchange=function(event){
console.log(event.target.checked);
}
</script>
使用css3 制作switch开关的更多相关文章
- css3实现switch开关效果
之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 <div class="container"> <div class="bg_ ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- BigDecimal快速使用
double类型最多支持16位有效数字,且最大值只支持10^308次方,大一点的数字会变为科学计数法,小数精度不够等有一系列不方便的问题: 引进BigDecimal解决此类麻烦,弊端,BigDecim ...
- (C)inline关键字
背景(C&C++中) 一.inline关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义. 表达式形式的宏定义一例:#define ExpressionNam ...
- iOS——多线程编程详细解析
基本定义: 程序:由代码生成的可执行应用.(例如QQ.app) 进程:一个正在运行的程序可以看做是一个进程. (例如:正在运行的QQ 就是一个进程),进程拥有独立运行所需要的全部资源. 线程: 程序中 ...
- Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))【附带实例源码】
使用WebClient读取XAP包同目录下的XML文件 我们想要读取XAP包下面的XML文件,需要将此XML文件放在加载XAP包的网页的目录中去,然后使用URI方式读取此URL方式下的XML文件. 首 ...
- macbook pro 下eclipse配置svn插件
eclipse中最常使用的SVN插件是subclipse,先到subclipse官网:http://subclipse.tigris.org下载该插件. 如上图,点击“Download and I ...
- 「网络流24题」「LuoguP4014」 分配问题
Description 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为 cij.试设计一个将 n 件工作分配给 n 个人做的分配方案,使产生的总效益最大. Input 文 ...
- 字符串转UTF-8码(%开头)
var str = '中'; var code = encodeURI(str); console.log(code); // => %E4%B8%AD
- http查看工具
View HTTP Request and Response Header Web-Sniffer Desktop App Please check our new free Web-Sniffer ...
- python+selenium高亮显示正在操作的页面元素
原文地址:https://blog.csdn.net/wxstar8/article/details/80801405 from selenium import webdriver import un ...
- 用 SDL2 加载PNG平铺背景并显示前景
上一篇中加载的是BMP,这次可以引用 SDL2_image.lib,加载更多格式的图像. LoadImage函数做了改动,区别在于不用将surface转换成texture了. 环境:SDL2 + VC ...