svg+js实现红色水滴柱子动画效果代码-html代码-BFW代码库

svg+js实现红色水滴柱子动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现红色水滴柱子动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --one:#111;
          --two:#c00;
        }
        
        body {
          background-color: var(--one);
          margin: 0;
        }
        
        svg {
          height: 100vh;
          width: 100%;
          display: block;
        }
        
        rect[y="0"] {
          fill: var(--two);
        }
        
        rect[y="100"] {
          fill: var(--one);
        }
        
        path {
          transition: 3s cubic-bezier(0.3, 0.2, 0.1, 1.2);
          fill: none;
          stroke: var(--two);
          stroke-width: 10;
          stroke-linejoin: round;
          stroke-linecap: round;
        }
        
        #floor {
          stroke: var(--one);
        }
    </style>



</head>


<body>
    <svg viewBox="-10 -5 220 200" preserveAspectRatio="xMidYMin meet" ; style="position:fixed; top:0;"> 
    <rect x="-5" y="0" width="210" height="100"  rx="5"   />
    <rect x="0" y="100" width="205" height="100"  />
    <path id="roof" />
    <path id="floor" />
  </svg>


    <script>
     // tiny-as random min-max function
function rMe(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
   
}

// grap my path
let roo.........完整代码请登录后点击上方下载按钮下载查看