二十、滑动开关css

如上图所示的图片，如何通过css实现呢？

下面咱们慢慢尝试：

html:

    <div class="togglePosition">
       <label class="toggle">
          <input type="checkbox">
          <div class="track">
               <div class="handle"></div>
          </div>
      </label>
    </div>

css：

<style  type="text/css">
.toggle {position: relative; display: inline-block; pointer-events: auto; margin: -5px; padding: 5px; }
.toggle input:checked + .track {border-color: #4AA8FF; background-color: #4AA8FF; }
.toggle.dragging .handle {background-color: #f2f2f2 !important; }
.toggle input {display: none; }
/* the track appearance when the toggle is "off" */
.toggle .track {
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background-color, border;
  transition-property: background-color, border;
  display: inline-block;
  box-sizing: border-box;
  width: 51px;
  height: 31px;
  border: solid 2px #e6e6e6;
  border-radius: 20px;
  background-color: #fff;
  content: ' ';
  cursor: pointer;
  pointer-events: none; }

/* Fix to avoid background color bleeding */
/* (occurred on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */
.platform-android4_2 .toggle .track {-webkit-background-clip: padding-box; }

/* the handle (circle) thats inside the toggle's track area */
/* also the handle's appearance when it is "off" */
.toggle .handle {
  -webkit-transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1);
  transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1);
  -webkit-transition-property: background-color, transform;
  transition-property: background-color, transform;
  position: absolute;
  display: block;
  width: 27px;
  height: 27px;
  border-radius: 27px;
  background-color: #fff;
  top: 7px;
  left: 7px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15); }
  .toggle .handle:before {position: absolute; top: -4px; left: -21.5px; padding: 18.5px 34px; content: " "; }

.toggle input:checked + .track .handle {-webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); background-color: #fff; } 
 .togglePosition{height: 20px; width: 33px; display: inline-block;}
 .toggle .track{width: 46px; height: 30px; border: solid 2px #e6e6e6; border-radius: 20px; }
 .toggle .handle{width: 28px; height: 28px; border-radius: 18px; background-color: #fff; top: 6px; left: 3px;}
 .toggle{margin: -5px; padding: 5px;}
</style>

把上面的代码放入你的html文件动手试试吧，可能不是非常完美，但我相信有了上面的基础你肯定会做出相应的改动实现自己想要的理想的效果的……