three+TweenMax实现三维胶囊开关checkbox点击动画切换效果代码-html代码-BFW代码库

three+TweenMax实现三维胶囊开关checkbox点击动画切换效果代码

代码语言：html

代码描述：three+TweenMax实现三维胶囊开关checkbox点击动画切换效果代码

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

<html>

<head>
    <style>
        .switch {
          --background: #E4ECFA;
          --background-active: #275EFE;
          --shadow: rgba(18, 22, 33, .04);
          --shadow-dark: rgba(18, 22, 33, .32);
          cursor: pointer;
          display: flex;
          -webkit-tap-highlight-color: transparent;
          zoom: 1.5;
        }
        .switch input[type=checkbox] {
          display: none;
        }
        .switch input[type=checkbox] + div {
          width: 40px;
          height: 24px;
          border-radius: 12px;
          overflow: hidden;
          position: relative;
          transition: transform 0.3s ease;
          background: var(--background);
          -webkit-mask-image: -webkit-radial-gradient(white, black);
        }
        .switch input[type=checkbox] + div:before,
        .switch input[type=checkbox] + div canvas {
          left: 0;
          top: 0;
          display: block;
          position: absolute;
          transition: transform 0.5s ease, filter 0.5s ease;
        }
        .switch input[type=checkbox] + div:before {
          --x: -100%;
          --s: 1;
          content: "";
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: var(--background-active);
          transform: translateX(var(--x)) scale(var(--s));
        }
        .switch input[type=checkbox] + div canvas {
          --x: -8px;
          display: block;
          filter: drop-shadow(0 1px 2px var(--shadow));
          transform: translate(var(--x), -8px);
        }
        .switch input[type=checkbox]:checked + div:before {
          --s: 3;
          --x: 0;
        }
        .switch input[type=checkbox]:checked + div canvas {
          --x: 8px;
          filter: drop-shadow(0 1px 2px var(--shadow-dark));
        }
        .switch:active input[type=checkbox] + div {
          transform: scale(0.92);
        }
        .switch span {
          line-height: 24px;
          font-size: 14px;
          font-weight: 500;
          display: block;
          margin: 0 0 0 8px;
        }
        
        html {
          box-sizing: border-box;
          -webkit-font-smoothing: antialiased;
        }
        
        * {
          box-sizing: inherit;
        }
        *:before, *:after {
          box-sizing: inherit;
        }
        
        body {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background: #fff;
          font-family: "Roboto", Arial;
          color: #6C7486;background-color: #1F1F1F;overflow: hidden
        }
        body .switch:not(:last-child) {
          margin-bottom: 16px;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
</head>

<body>
    <label class="switch">
    <input type="checkbox">
    <div>
        <canvas></canvas>
    </div>
    <span.........完整代码请登录后点击上方下载按钮下载查看