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: -10.........完整代码请登录后点击上方下载按钮下载查看