css代码实现switch开关滑动
效果预览：
代码如下：
<style>
#toggle-button{
display: none;
}
.button-label{
position: relative;
display: inline-block;
width: 80px;
background-color: #ccc;
border: 1px solid #ccc;
border-radius: 30px;
cursor: pointer;
}
.circle{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
}
.button-label .text {
line-height: 30px;
font-size: 18px;
/*
用来阻止页面文字被选中，出现蓝色
可以将下面两行代码注释掉来查看区别
*/
-webkit-user-select: none;
user-select: none;
}
.on {
color: #fff;
display: none;
text-indent: 10px;
}
.off {
color: #fff;
display: inline-block;
text-indent: 53px;
}
.button-label .circle{
left: 0;
transition: all 0.4s;/*transition过度，时间为0.4秒*/
}
#toggle-button:checked + label.button-label .circle{
left: 50px;
}
#toggle-button:checked + label.button-label .on{
display: inline-block;
}
#toggle-button:checked + label.button-label .off{
display: none;
}
#toggle-button:checked + label.button-label{
background-color: rgb(43, 180, 77);
}
</style>
<body>
<input type="checkbox" id="toggle-button">
<!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
<label for="toggle-button" class="button-label">
<span class="circle"></span>
<span class="text on">开</span>
<span class="text off">关</span>
</label>
</body>
知识点：
1.label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input
2.(:checked + 紧邻其后面标签) 的选择器。例如：#toggle-button:checked + label 解释：当id为toggle-button的checked为选中状态时，就选择紧邻其后的label标签
3.user-select: none;这个属性用来阻止页面文字被选中，如果不添加此属性，点击切换开关时，开/关 二字有时候会被选中，出现蓝色背景，如下图：
css代码实现switch开关滑动的更多相关文章
- CSS做一个Switch开关
本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...
- 使用css3 制作switch开关
使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...
- 微信小程序组件解读和分析：十五、switch 开关选择器
switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...
- 自定义常用input表单元素三：纯css实现自定义Switch开关按钮
自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...
- css3实现switch开关效果
之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 <div class="container"> <div class="bg_ ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- switch开关
1.开关按钮 效果如下图 2.css代码 .form-switch{ display: inline-block; } .form-switch input[type="checkbox&q ...
- CssStats – 分析和优化网站 CSS 代码的利器
CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...
- Less:优雅的写CSS代码
css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...
随机推荐
- 为了控制Bean的加载我使出了这些杀手锏
故事一: 绝代有佳人,幽居在空谷 美女同学小张,在工作中遇到了烦心事.心情那是破凉破凉的,无法言喻. 故事背景是最近由于需求变动,小张在项目中加入了MQ的集成,刚开始还没什么问题,后面慢慢问题的显露出 ...
- 阿里云服务器ECS Ubuntu18.04 初次使用配置教程(图形界面安装)
最近由于工作需要,要使用服务器测试,就先自已买了个服务器,就在阿里云买了一个,先买了那个叫虚拟主机的,后来发现不是我需要的,所以退了,就先了这个ECS主机.3年.如果购买就上图了.下面直接进入正题. ...
- k8s系列---stateful（有状态应用副本集）控制器
http://blog.itpub.net/28916011/viewspace-2215046/ 在应用程序中,可以分为有状态应用和无状态应用. 无状态的应用更关注于群体,任何一个成员都可以被取代. ...
- cdh集群hive升级，数据不丢失
1.下载hive-1.2.1安装包 http://archive.apache.org/dist/hive/hive-1.2.1/apache-hive-1.2.1-bin.tar.gz 2.将安装包 ...
- session和cookie的最深刻理解
先说session 对SESSION的争论好象一直没有停止过,不过幺麽能理解SESSION的人应该占90以上.但还是讲讲,别嫌老~ 有一些人赞成用SESSION,有一些人不赞成.但这个问题到底要怎么说 ...
- nginx启动报错nginx: [error] open() "/usr/local/etc/nginx/logs/nginx.pid" failed
问题:nginx启动的时候会报丢失pid的错误 nginx: [error] open() “/usr/local/var/run/nginx.pid” failed 解决方案: sudo nginx ...
- echarts 的 formatter用法
前言:formatter格式化方法.使用formatter调用自定义的数据,把内容通过处理让变成我们想要的样子. 比如,echarts数据显示是这样的(bug:部分内容被隐藏掉了,显示太长,不美观) ...
- bootstrap--font-face问题
在做仿天猫项目时,预期 已经用cdn加载bootstrap,但是不显示文字图标:实际情况: 发现是引用bootstrap的版本导致的.4.0.0版本及以后的css源码中找不到@font-face.可以 ...
- [javascript] 利用chrome的overrides实时调试线上js
chrome的开发者工具,在source选项卡下,可以看到js的源代码,有一个断点调试功能,就是在js的源代码行号那里点击一下,出现一个箭头,当再次刷新页面并且进行了相应操作时,就会停在断点的地方.我 ...
- 关于css背景的一点总结
background默认背景区域覆盖内容和内边距及边框,分别有以下属性: 1.background-clip(定义背景绘制区域) border-box 背景覆盖边框最外面 padding-box 背景 ...