纯CSS3代码实现switch滑动开关按钮效果

html结构

XML/HTML Code复制内容到剪贴板

1. <div class="container">  
2.         <div class="bg_con">  
3.             <input id="checked_1" type="checkbox" class="switch" />  
4.             <label for="checked_1"></label>  
5.         </div>  
6.     </div>  

css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。

CSS Code复制内容到剪贴板

1. .switch{   
2.         display:none;   
3.     }   
4.     label{   
5.         position:relative;   
6.         display: block;   
7.         padding: 1px;   
8.         border-radius: 24px;   
9.         height: 22px;   
10.         margin-bottom: 15px;   
11.         background-color: #eee;   
12.         cursor: pointer;   
13.         vertical-align: top;   
14.         -webkit-user-select: none;   
15.     }   
16.     label:before{   
17.         content: '';   
18.         display: block;   
19.         border-radius: 24px;   
20.         height: 22px;   
21.         background-color: white;   
22.         -webkit-transform: scale(1, 1);   
23.         -webkit-transition: all 0.3s ease;   
24.     }   
25.     label:after{   
26.         content: '';   
27.         position: absolute;   
28.         top: 50%;     
29.         left: 50%;     
30.         margin-top: -11px;     
31.         margin-left: -11px;   
32.         width: 22px;   
33.         height: 22px;   
34.         border-radius: 22px;   
35.         background-color: white;   
36.         box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);   
37.         -webkit-transform: translateX(-9px);   
38.         -webkit-transition: all 0.3s ease;   
39.     }   
40.     .switch:checked~label:after{   
41.         -webkit-transform: translateX(9px);   
42.     }   
43.     .switch:checked~label:before{   
44.         background-color:green;   
45.     }  
46. 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。