CSS3模拟IOS滑动开关效果

前言

H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释

效果

代码

1.   
2.   
3.   
4.   
5.       
6.       
7.       
8.           
9.         html {   
10.             font-size: 100px;   
11.         }   
12.            
13.        .ios-checkbox{   
14.             height:4rem;   
15.             width:4rem;   
16.             position:absolute;   
17.             left:50%;   
18.             top:50%;   
19.             -webkit-transform:translate(-50%, -50%);   
20.                     transform:translate(-50%, -50%);   
21.             border:.05rem dashed #3DB7A9;   
22.             display:-webkit-box;   
23.             display:-webkit-flex;   
24.             display:-ms-flexbox;   
25.             display:flex;   
26.             -webkit-box-orient:horizontal;   
27.             -webkit-box-direction:normal;   
28.             -webkit-flex-direction:column;   
29.                 -ms-flex-direction:column;   
30.                     flex-direction:column;   
31.             -webkit-flex-wrap:nowrap;   
32.                 -ms-flex-wrap:nowrap;   
33.                     flex-wrap:nowrap;   
34.             -webkit-justify-content:space-around;   
35.                 -ms-flex-pack:distribute;   
36.                     justify-content:space-around;   
37.             -webkit-box-align:center;   
38.             -webkit-align-items:center;   
39.                 -ms-flex-align:center;   
40.                     align-items:center;   
41.        }   
42.            
43.         .emulate-ios-button {   
44.             display: block;   
45.             width: 2rem;   
46.             height: 1rem;   
47.             background: #ccc;   
48.             border-radius: 5rem;   
49.             cursor: pointer;   
50.             position: relative;   
51.             -webkit-transition: all .3s ease;   
52.             transition: all .3s ease;   
53.         }   
54.   
55.            
56.   
57.         .emulate-ios-button:after {   
58.             content: '';   
59.             display: block;   
60.             width: .9rem;   
61.             height: .9rem;   
62.             border-radius: 100%;   
63.             background: #fff;   
64.             box-shadow: 0 1px 1px rgba(0, 0, 0, .1);   
65.             position: absolute;   
66.             left: .05rem;   
67.             top: .05rem;   
68.             -webkit-transform:translateZ(0);       
69.             transform:translateZ(0);   
70.             -webkit-transition: all .3s ease;     
71.             transition: all .3s ease;   
72.         }   
73.   
74.         .emulate-ios-button:active:after {   
75.             width: 1.1rem;   
76.         }   
77.   
78.          
79.         .raw-checkbox{   
80.             height:2rem;   
81.             width:2rem;   
82.         }   
83.   
84.         .raw-checkbox:checked+label {   
85.             background: #34bf49;   
86.         }   
87.   
88.            
89.         .raw-checkbox:checked+label:after {   
90.             left: 1.05rem;   
91.         }   
92.   
93.         .raw-checkbox:checked+label:active:after {   
94.             left: .5rem;   
95.         }   
96.   
97.   
98.         .raw-checkbox:disabled+label {   
99.             background: #d5d5d5;   
100.             pointer-events: none;   
101.         }   
102.   
103.         .raw-checkbox:disabled+label:after {   
104.             background: #bcbdbc;   
105.         }   
106.   
107.       
108.   
109.   
110.   
111.       
112.           
113.           
114.