IOS风格开关

开关没有用到JS写，纯CSS写的，直接贴代码吧：

html页面：

1 <body>
2         <section class="select-box">
3             <div class="checkbox">
4                 <input type="checkbox">
5                 <label></label>
6             </div>
7         </section>
8     </body>

CSS样式：

  1 .select-box  *,
  2             .select-box  *:after,
  3             .select-box  *:before {
  4                 box-sizing: border-box;
  5             }
  6         
  7             .select-box {
  8                 /*float: left;
  9                 min-width: 150px;
 10                 width: 33.33%;*/
 11                 margin:  0 auto;
 12                 /*min-height: 100px;*/
 13             }
 14             /*=====================*/
 15             
 16             .checkbox {
 17                 position: relative;
 18                 display: inline-block;
 19             }
 20             
 21             
 22             .checkbox label {
 23                 width: 90px;
 24                 height: 42px;
 25                 background: #ccc;
 26                 position: relative;
 27                 display: inline-block;
 28                 border-radius: 46px;
 29                 -webkit-transition: 0.4s;
 30                 transition: 0.4s;
 31             }
 32             
 33             .checkbox label:after {
 34                 content: '';
 35                 position: absolute;
 36                 width: 30px;
 37                 height: 30px;
 38                 border-radius: 100%;
 39                 left: 0px;
 40                 top: 0px;
 41                 z-index: 2;
 42                 background: #fff;
 43                 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 44                 -webkit-transition: 0.4s;
 45                 transition: 0.4s;
 46             }
 47             
 48             .checkbox input {
 49                 position: absolute;
 50                 left: 0;
 51                 top: 0;
 52                 width: 100%;
 53                 height: 100%;
 54                 z-index: 5;
 55                 opacity: 0;
 56                 cursor: pointer;
 57             }
 58             
 59             .checkbox input:hover+label:after {
 60                 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
 61             }
 62             
 63             .checkbox input:checked+label:after {
 64                 left: 40px;
 65             }
 66             
 67             .checkbox {
 68                 width: 80px;
 69                 height: 30px;
 70                 border: 2px solid #b2b2b2;
 71                 background: #2BBC35;
 72                 border-radius: 30px;
 73                 overflow: hidden;
 74             }
 75             
 76             .checkbox:after,
 77             .checkbox label:before {
 78                 content: '打开';
 79                 position: absolute;
 80                 left: 2px;
 81                 top: 5px;
 82                 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 83                 font-size: 12px;
 84                 color: #fff;
 85             }
 86             
 87             .checkbox label:before {
 88                 content: '关闭';
 89                 left: auto;
 90                 top: 5px;
 91                 right: 25px;
 92                 z-index: 1;
 93             }
 94             
 95             .checkbox label {
 96                 background: #b2b2b2;
 97                 width: 90px;
 98                 height: 32px;
 99                 border-radius: 4px;
100             }
101             
102             .checkbox label:after {
103                     border-radius: 25px;
104                     box-shadow: none !important;
105                     top: 0;
106                     width: 25px;
107                     height: 25px;
108             }
109             
110             .checkbox input:checked+label {
111                 -ms-transform: translateX(55px);
112                 -webkit-transform: translateX(55px);
113                 transform: translateX(55px);
114             }
115             
116             .checkbox input:checked+label:after {
117                         left: -5px;
118                         top: 0px;
119             }

效果图 ：

    

因为采用的是transform实现动画效果，所以IE低版本不兼容。还有主要就是调样式，没啥了。

 

posted @ 2017-09-13 16:41  脑袋空空空想家  阅读(234)  评论(0)  编辑  收藏  举报