svg+js实现此消彼长动画效果代码-html代码-BFW代码库

svg+js实现此消彼长动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现此消彼长动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --one:#bdd7ff;
          --two:#4c94ff;
          --three:#103064;
        }
        
        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: 0.35s cubic-bezier(0.3, 0.2, 0.1, 1.4);
          fill: none;
          stroke: var(--two);
          stroke-width: 10;
          stroke-linejoin: round;
          stroke-linecap: round;
        }
        
        #floor {
          stroke: url(#one);
        }
        
        rect[y="100"] {
          fill: url(#one);
        }
        
        #roof {
          stroke: url(#two);
        }
        
        rect[y="0"] {
          fill: url(#two);
        }
        
        #one :first-child {
          stop-color: var(--one);
        }
        
        #one :last-child {
          stop-color: var(--two);
        }
        
        #two :first-child {
          stop-color: var(--two);
        }
        
        #two :last-child {
          stop-color: var(--three);
        }
    </style>



</head>


<body>
    <s.........完整代码请登录后点击上方下载按钮下载查看