纯CSS3代码实现switch滑动开关按钮效果
发布时间:2020-03-17 10:12:25 所属栏目:系统 来源:站长网
导读:副标题#e# XML/HTML Code复制内容到剪贴板 divclass=container divclass=bg_con inputid=checked_1type=checkboxclass=switch/ labelfor=checked_1/label /div /div css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现。
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08); -webkit-transform: translateX(-9px); -webkit-transition: all 0.3s ease; } .switch:checked~label:after{ -webkit-transform: translateX(9px); } .switch:checked~label:before{ background-color:green; } 以上所述是小编给大家介绍的纯CSS3代码实现switch滑动开关按钮效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! (编辑:海南站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 详解css3中dispaly的Grid布局与Flex布局
- 车用芯片再遭膺惩!台积电南科P14厂停电波及3万片晶圆
- OpenHarmony轻量系统研发OneNET云接入
- 微软更新引起 Window 11 10等系统服务器故障
- 时间就是金钱 浪潮K1 Power极速交易系统超低时延抢占市场先
- 优秀绿色的个人服务器 HTTP File Server
- qun.com域名拍卖价40.5万元 物流双拼21.8万元
- 盗版电脑系统怎么升win10 盗版升级win10黑屏的多种解决方案
- Windows – PowerShell复制项方法失败 – 文件名中的括号
- 微软Win10 KB5005463补丁更新 推送电脑运作状况检查应用程序
站长推荐
热点阅读