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

代码语言：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-switch .fluid canvas {
          display: block;
          width: 44px;
          height: 30px;
          position: absolute;
          left: 0;
          top: -3px;
          filter: url("#goo");
        }
        
        html {
          box-sizing: border-box;
          -webkit-font-smoothing: antialiased;
        }
        
        * {
          box-sizing: inherit;
        }
        *:before, *:after {
          box-sizing: inherit;
        }
        
        body {
          min-height: 100vh;
          display: flex;
          font-family: "Inter", Arial;
          justify-content: center;
          align-items: center;
          background: #f4f5fa;
        }
        body .twitter {
          position: fixed;
          display: block;
          right: 12px;
          bottom: 12px;
        }
        body .twitter svg {
          width: 32px;
          height: 32px;
          fill: #1da1f2;
        }
    </style>




</head>

<body>
    <label class="fluid-switch">
  <input type="checkbox" />
  <div class="knob"></div>
  <div class="fluid">
    <canvas></canvas>
  </div>
</label>

    <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 25 -7"/>
    </filter>
  </defs>
</svg>


    <script>
        // Fluid simulation refactored from https://codepen.io/dissimulate/pen/hszvg
        
        class Fluid {
          constructor(width, height, colorRGB, canvas) {
            this.width = width;
            this.height = height;
            this.colorRGB = colorRGB;
            this.canvas = canvas;
            this.ctx = canvas.getContext("2d");
        
            this.spacing = 20;
            this.radius = 9;
            this.perGroup = 100;
            this.limit = this.radius * 0.66;
            this.amountX = Math.round(this.width / this.spacing) + 1;
            this.amountY = Math.round(this.height / this.spacing) + 1;
        
            this.grid = [];
            this.particles = [];
            this.particlesAmount = 0;
            this.textures = [];
        
            this.gravityX = -0.5;
            this.gravityY = 0;
        
            this.play = false;
          }
        
          createMeta() {
            this.metaCanvas = document.createElement("canvas");
            this.metaCtx = this.metaCanvas.getContext("2d");
        
            this.metaCanvas.width = this.width;
            this.metaCanvas.height = this.height;
          }
        
          init() {
            this.createMeta();
        
            this.canvas.width = this.width;
            this.canvas.height = this.height;
        
            for (
            var i = 0;
            i < [this.perGroup, this.perGroup, this.perGroup].length;
            i++)
            {
              this.textures[i] = document.createElement("canvas");
              this.textures[i].width = this.radius * 2;
              this.textures[i].height = this.radius * 2;
              var nctx = this.textures[i].getContext("2d");
        
              var grad = nctx.createRadialGradient(
              this.radius,
              this.radius,
              1,
              this.radius,
              this.radius,
              this.radius);
        
        
              grad.addColorStop(0, "rgba(" + this.colorRGB + ",1)");
              grad.addColorStop(1, "rgba(" + this.colorRGB + ",0)");
              nctx.fillStyle = grad;
              nctx.beginPath();
              nctx.arc(this.radius, this.radius, this.radius, 0, Math.PI * 2, true);
              nctx.closePath();
              nctx.fill();
          .........完整代码请登录后点击上方下载按钮下载查看