在浏览网页时，我们经常会看到一些模拟开关，它们的功能是不同的，比如看视频时的开关按钮，移动APP中的功能开关等等。那么我们来说说是如何实现的。
首先附上效果图
主要用于CSS3: checked，:before，:after选择器等动画过渡效果。
下面附上页面源代码
& lt！DOCTYPE html>。
& lthtml>。
& lthead>。
& lttitle>。& lt/title>。
& ltstyle type="text/css " >
body{
背景:黑色；
}
* {
边距:0；
填充:0；
}
body {
填充:26%；
}
。按钮{
显示:内嵌块；
位置:相对；
高度:40px
-web kit-user-select:none；
-web kit-tap-highlight-color:rgba(0，0，0，0)；
光标:指针；
背景色:# eee
边界半径:30px
}
输入{
不透明度:0；
位置:绝对；
top:0；
左:0；
}
。按钮:在{
内容:“”；
显示:内嵌块；
宽度:80px
高度:42px
背景色:# fff
边界半径:42px
框尺寸:边框；
边框:2px实心# eee
跃迁:全0.2s线性；
}
。按钮:在{
位置:绝对；
左:2px
top:2px；
内容:“”；
显示:内嵌块；
宽度:38px
高度:38px
背景色:# fff
边界半径:40px
跃迁:全0.2s线性；
框影:0px 1px 3px # bbb
}
输入:选中~。按钮:在{
背景色:红色；
边框:1px纯红；
}
输入:选中~。按钮:在{
左:40px
}
& lt/style>。
& lt/head>。
& ltbody>。
& ltinput type = " checkbox " id = " SW tich " & gt。
& ltlabel class = " button " for = " SW tich " & gt。& lt/label>。
& lt/body>。
& lt/html>。
嗯，不是很简单吗？用手做！
如果你喜欢这篇文章，可以关注作者微信微信官方账号，每天都会有精彩的web干货与你分享！
1.《模拟开关 CSS之模拟开关状态的实现！》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《模拟开关 CSS之模拟开关状态的实现！》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/tiyu/1455615.html
