svg+css八字路径无限循环动画效果代码-html代码-BFW代码库

svg+css八字路径无限循环动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css八字路径无限循环动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        /* Colors */
        :root {
          --white: #ffffff;
          --turquoise: #3DBABA;
          --powder-blue:#87AEAF;
          --alice-blue:#D7EFF7;
          --anti-flash-white:#F6F9FD;
          --oxford-blue:#011529;
          --aquamarine: #7FFFD4;
          --payne-gray:#607080;
          --prussian-blue:#082E47;
          --rich-black:#03101C;
          --brand: var(--turquoise);
          --fg:var(--oxford-blue);
          --fg-1:var(--rich-black);
          --fg-2:var(--prussian-blue);
          --dark: var(--oxford-blue);
          --light: var(--white);
          --bg: var(--white);
          --bg-1:var(--alice-blue);
          --bg-2:var(--anti-flash-white);
          --neutral: var(--powder-blue);
          --tone-1: var(--turquoise);
          --tone-2: var(--aquamarine);
        }
        
        .fbottom, .ll {
          fill: none;
        }
        
        .fbottom {
          stroke-width: inherit;
          stroke: var(--neutral);
          stroke-opacity: 0.3;
        }
        
        .ll {
          stroke: var(--brand);
          animation: loop 3s linear infinite;
          stroke-width: 0.35;
          stroke-dasharray: 3 24.5;
          stroke-linecap: round;
        }
        
        .finny {
          stroke-width: 1.43;
          animation: rot 36s linear infinite;
        }
        
        .shad {
          animation: raise 3s linear infinite;
        }
        
        .shad.odd {
          animation-delay: -1.5s;
        }
        
        @keyframes raise {
          0%, 20% {
            opacity: 1;
          }
          30%, 70% {
            opacity: 0;
          }
          80%, 100% {
            opacity: 1;
          }
        }
        .ll {
          animation-delay: -1.5s;
        }
        
        .finny {
          perspective: 500px;
        }
        
        @keyframes loop {
          0% {
            stroke-dashoffset.........完整代码请登录后点击上方下载按钮下载查看