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