博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
纯css实现开关按钮效果
阅读量:6463 次
发布时间:2019-06-23

本文共 1392 字,大约阅读时间需要 4 分钟。

css:

.darkBox{
width:80px; height:35px; position:relative; margin:auto; } .darkBox:before{
content:"ON"; width:40px; height:35px; position:absolute; left:0; top:0; z-index:1; } .darkBox:after{
content:"OFF"; width:40px; height:35px; position:absolute; right:0; top:0; } input[type=checkbox]{
position:absolute; opacity: 0; } input[type=checkbox]:checked+label:before{
background:#3ccd58; } input[type=checkbox]:checked+label:after{
left:40px; } label{
width:40px; height:35px; position: relative; } label:before{
content:""; width:80px; height:35px; position:absolute; /*left:0;*/ background:#fe5453; } label:after{
content:""; width:40px; height:35px; position:absolute; left:0; background:#b1b1b1; z-index:2; transition:all 0.2s ease; }

这里运用了before和after类选择器的知识。

转载于:https://www.cnblogs.com/ly-qingqiu/p/10496556.html

你可能感兴趣的文章
MySQL日期 专题
查看>>
C#中禁止程序多开
查看>>
分布式缓存Redis使用以及原理
查看>>
[LeetCode] Number of 1 Bits 位操作
查看>>
数据结构与算法JavaScript描述——队列
查看>>
练习二:结对练习
查看>>
JSON中JObject和JArray,JValue序列化(Linq)
查看>>
onclick与addEventListener的区别
查看>>
杂七杂八
查看>>
js中的~~、Object.entires用法(转)
查看>>
samba、nginx服务
查看>>
Activity竟然有两个onCreate方法,可别用错了
查看>>
Linux经常使用命令(十六) - whereis
查看>>
Tomcat
查看>>
插件编译 版本问题
查看>>
android中TextView的阴影设置
查看>>
core dump相关
查看>>
MySQL如何导出带日期格式的文件
查看>>
Linux五种IO模型
查看>>
Bootstrap技术: 模式对话框的使用
查看>>