使用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开关的更多相关文章

  1. css3实现switch开关效果

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

  2. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  3. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  4. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  5. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  6. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  7. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  8. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  9. 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. BigDecimal快速使用

    double类型最多支持16位有效数字,且最大值只支持10^308次方,大一点的数字会变为科学计数法,小数精度不够等有一系列不方便的问题: 引进BigDecimal解决此类麻烦,弊端,BigDecim ...

  2. (C)inline关键字

      背景(C&C++中) 一.inline关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义. 表达式形式的宏定义一例:#define ExpressionNam ...

  3. iOS——多线程编程详细解析

    基本定义: 程序:由代码生成的可执行应用.(例如QQ.app) 进程:一个正在运行的程序可以看做是一个进程. (例如:正在运行的QQ 就是一个进程),进程拥有独立运行所需要的全部资源. 线程: 程序中 ...

  4. Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))【附带实例源码】

    使用WebClient读取XAP包同目录下的XML文件 我们想要读取XAP包下面的XML文件,需要将此XML文件放在加载XAP包的网页的目录中去,然后使用URI方式读取此URL方式下的XML文件. 首 ...

  5. macbook pro 下eclipse配置svn插件

    eclipse中最常使用的SVN插件是subclipse,先到subclipse官网:http://subclipse.tigris.org下载该插件.   如上图,点击“Download and I ...

  6. 「网络流24题」「LuoguP4014」 分配问题

    Description 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为 cij.试设计一个将 n 件工作分配给 n 个人做的分配方案,使产生的总效益最大. Input 文 ...

  7. 字符串转UTF-8码(%开头)

    var str = '中'; var code = encodeURI(str); console.log(code); // => %E4%B8%AD

  8. http查看工具

    View HTTP Request and Response Header Web-Sniffer Desktop App Please check our new free Web-Sniffer ...

  9. python+selenium高亮显示正在操作的页面元素

    原文地址:https://blog.csdn.net/wxstar8/article/details/80801405 from selenium import webdriver import un ...

  10. 用 SDL2 加载PNG平铺背景并显示前景

    上一篇中加载的是BMP,这次可以引用 SDL2_image.lib,加载更多格式的图像. LoadImage函数做了改动,区别在于不用将surface转换成texture了. 环境:SDL2 + VC ...