css实现拟物化checkbox开关按钮效果代码-html代码-BFW代码库

css实现拟物化checkbox开关按钮效果代码

代码语言：html

代码描述：css实现拟物化checkbox开关按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html class=''>

<head>
    <meta charset='UTF-8'>
    <title></title>
    <style class="cp-pen-styles">
        @import url(http://fonts.useso.com/css?family=Open+Sans:800);
        *,
        *:before,
        *:after {
          -moz-box-sizing: border-box;
               box-sizing: border-box;
        }
        body {
          background-color: #2c3e50;
        }
        .button {
          display: block;
          position: absolute;
          width: 240px;
          height: 80px;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          background: -webkit-linear-gradient(top, #11181f 0%, #161f29 100%);
          background: linear-gradient(to bottom, #11181f 0%, #161f29 100%);
          border-radius: 40px;
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
          cursor: pointer;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        .button span {
          position: absolute;
          display: block;
        }
        .button span:first-of-type {
          z-index: 100;
          top: 4px;
          right: 4px;
          width: 160px;
          height: 72px;
          background: -webkit-linear-gradient(top, #2c3e50 0%, #1e2a36 100%);
          background: linear-gradient(to bottom, #2c3e50 0%, #1e2a36 100%);
          box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), -4px 2px 8px rgba(0, 0, 0, 0.4), 2px 0 1px rgba(242, 201, 197, 0.5) inset;
          border-radius: 36px;
          -webkit-transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
                  transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
        }
        .button span:nth-last-of-type(-n+2) {
          z-index: 10;
          top: 4px;
          width: 116px;
          height: 72px;
          -webkit-transition: opacity 800ms ease 100ms;
                  transition: opacity 800ms ease 100ms;
        }
        .button span:nth-last-of-type(-n+2):afte.........完整代码请登录后点击上方下载按钮下载查看