svg+js实现流体液体胶囊开关checkbox效果代码-html代码-BFW代码库

svg+js实现流体液体胶囊开关checkbox效果代码

代码语言：html

代码描述：svg+js实现胶囊开关checkbox内流体液体流动动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .fluid-switch {
          --active: 117, 162, 253;
          display: block;
          position: relative;
          border-radius: 11px;
          cursor: pointer;
        }
        .fluid-switch input {
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          border: 0;
          display: block;
          width: 44px;
          padding: 0;
          margin: 0;
          height: 22px;
          background-color: #fff;
          box-shadow: 0px 1px 1px rgba(10, 19, 39, 0.1), 0px 4px 12px rgba(10, 19, 39, 0.03), 0px 4px 20px rgba(10, 19, 39, 0.04);
          border-radius: inherit;
        }
        .fluid-switch input:checked + .knob {
          --knob-x: 22px;
          --knob-scale: 1;
          box-shadow: 0px 4px 20px rgba(10, 19, 39, 0.1), 0px 4px 12px rgba(10, 19, 39, 0.1), 0px 1px 1px rgba(10, 19, 39, 0.15);
        }
        .fluid-switch input:not(:checked) + .knob + .fluid {
          filter: grayscale(60%);
          opacity: 0.3;
        }
        .fluid-switch .knob {
          position: absolute;
          left: 2px;
          top: 2px;
          z-index: 1;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background-color: #fff;
          box-shadow: 0px 4px 20px rgba(10, 19, 39, 0.03), 0px 4px 12px rgba(10, 19, 39, 0.06), 0px 1px 1px rgba(10, 19, 39, 0.1);
          transform: translateX(var(--knob-x, 0)) scale(var(--knob-scale, 0.88)) translateZ(0);
          transition: box-shadow 0.4s, transform 0.65s cubic-bezier(0.44, 0.13, 0.11, 1.14);
        }
        .fluid-switch .fluid {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          overflow: hidden;
          -webkit-mask-image: -webkit-radial-gradient(white, black);
          transition: filter 0.5s, opacity 0.5s;
        }
        .fluid-.........完整代码请登录后点击上方下载按钮下载查看