<style>
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
display: inline-block;
width: 40px;
height: 20px;
position: relative;
-webkit-transition: 0.3s;
transition: 0.3s;
margin: 0px 20px;
box-sizing: border-box;
}
input[type="checkbox"] + label:after {
content: '';
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
-webkit-transition: 0.3s;
transition: 0.3s;
cursor: pointer;
}
#btn:checked + label {
background: #AEDCAE;
}
#btn:checked + label:after {
background: #5CB85C;
}
#btn:checked + label:after {
left: calc(100% - 18px);
}
#btn + label {
background: #ddd;
border-radius: 20px;
}
#btn + label:after {
background: #fff;
border-radius: 50%;
width: 16px;
height: 16px;
top: 2px;
left: 2px;
}
</style>
<input type="checkbox" id="btn">
<label for="btn"></label>

css 动画开关按钮的更多相关文章

  1. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

  2. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  3. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  4. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  5. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  6. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  7. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  8. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  9. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

随机推荐

  1. Verilog-同步FIFO

    参考博客:https://blog.csdn.net/hengzo/article/details/49683707 1.基本框图 1)双端口RAM加两个读写指针 2)写数据.写使能.写满:读数据.读 ...

  2. 报错:无法加载文件 D:\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本...

    解决报错:(1)以管理员身份运行vs code (2)在终端执行:get-ExecutionPolicy,显示Restricted(表示状态是禁止的)  [受限制的.保密的] (3)在终端执行:set ...

  3. matlab逐行读取text文件,编写函数提取需要的文字

    在数学建模中遇到的数据比较难处理,而且给的是text格式,自己想了好长时间才编出来,现在分享一下,可以交流学习 目标的text文件是 只提取里面的数据 需要自编函数 clc,clear path='D ...

  4. Node.js_1.1

    Node.js简介 Node.js是一个能够在服务器端运行JavaScript的开源代码.跨平台JavaScript运行环境 Node采用Google开发的V8引擎运行js代码,使用事件驱动.非阻塞和 ...

  5. 任意指定一个key获取该key所处在哪个node节点

    需求:任意指定一个key获取该key所处在哪个node节点上. 说明:redis自带的命令可以知道一个key所属的slot,可以知道node master对应哪些slot,但没有key和node的对应 ...

  6. 双向链表的简单Java实现-sunziren

    写在前面,csdn的那篇同名博客就是我写的,我把它现在在这边重新发布,因为我实在不想用csdn了,那边的广告太多了,还有就是那个恶心人的“阅读更多”按钮,惹不起我躲得起. 在上次分享完单向链表的简单编 ...

  7. django orm介绍以及字段和参数

    Object Relational Mapping (ORM) orm介绍 orm概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数 ...

  8. 为什么文件无法用wps打开,甚至wps.exe本身都无法打开?

    原因: 我的wps.exe在目录 programme installation 中 如果我把目录改成 programmeInstallation 那么就会变成打不开的情况. 解决方法就是改回去. 怎么 ...

  9. git pull报错you do not have permission to pull from the repository

    you do not have permission to pull from the repository解决方法   使用git进行项目的版本管理,换了台电脑,配置了账号和邮箱后,pull一个项目 ...

  10. 设置完代理IP,手机连接WiFi时连不上,一直在转

    fiddler抓包,设置代理后,会出现手机连不上网的情况,针对这个情况处理方式为: 首先如果已经连接上WiFi了,但是提示“不可上网”,那就把WiFi断开重新连接下. 不行的话就试试下面的办法 一.配 ...