svg+js实现blob彩色块状液体往下流动动画效果代码-html代码-BFW代码库

svg+js实现blob彩色块状液体往下流动动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现blob彩色块状液体往下流动动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        svg,
        main {
          width: 16rem;
          height: 24rem;
          isolation: isolate;
        }
        main {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          position: relative;
        }
        main::before {
          content: "";
          position: absolute;
          inset: -1rem;
          border: 1rem double black;
          background: hsl(180 100% 100% / 0.95);
        }
        svg {
          grid-column: 1;
          grid-row: 1;
        }
        g {
          filter: url(#fancy-goo);
        }
        
        #back,
        #front {
          mix-blend-mode: multiply;
        }
        
        #back circle {
          fill: hsl(343, 100%, 60%);
        }
        #front circle {
          fill: hsl(140, 100%, 45%);
        }
        
        body {
          height: 100vh;
          overflow: clip;
          display: flex;
          justify-content: center;
          align-items: center;
          background: hsl(180 100% 12%);
        }
        * {
          box-sizing: border-box;
          margin: 0;
        }
    </style>



</head>

<body>
    <main><svg viewBox="20 0 60 100">
    <g id="back">
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
      <circle cx="50" cy="50" r="15" />
    </g>
    <g id="front">
      <circle cx="50" cy="50" r="15" />.........完整代码请登录后点击上方下载按钮下载查看