css+svg实现无限循环的曲线动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css+svg实现无限循环的曲线动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">



    <style>
        * {
          border: 0;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        :root {
          font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
        }
        
        body {
          background: black;
          font: 1em/1.5 sans-serif;
          height: 100vh;
          display: grid;
          place-items: center;
        }
        
        main {
          padding: 1.5em 0;
        }
        
        .ic {
          display: block;
          width: 16em;
          height: 16em;
        }
        .ic__loop {
          animation: loop 4s linear infinite;
        }
        .ic__loop:nth-of-type(2) {
          animation-delay: -0.0833333333s;
        }
        .ic__loop:nth-of-type(3) {
          animation-delay: -0.1666666667s;
        }
        .ic__loop:nth-of-type(4) {
          animation-delay: -0.25s;
        }
        .ic__loop:nth-of-type(5) {
          animation-delay: -0.3333333333s;
        }
        .ic__loop:nth-of-type(6) {
          animation-delay: -0.4166666667s;
        }
        .ic__loop:nth-of-type(7) {
          animation-delay: -0.5s;
        }
        .ic__loop:nth-of-type(8) {
          animation-delay: -0.5833333333s;
        }
        .ic__loop:nth-of-type(9) {
          animation-delay: -0.6666666667s;
        }
        .ic__loop:nth-of-type(10) {
          animation-delay: -0.75s;
        }
        .ic__loop:nth-of-type(11) {
          animation-delay: -0.8333333333s;
        }
        .ic__loop:nth-of-type(12) {
          animation-delay: -0.9166666667s;
        }
        .ic__loop:nth-of-type(13) {
          animation-delay: -1s;
        }
        .ic__loop:nth-of-type(14) {
          animation-delay: -1.0833333333s;
        }
        .ic__loop:nth-of-type(15) {
          animation-delay: -1.1666666667s;
        }
        .ic__loop:nth-of-type(16) {
          animation-delay: -1.25s;
        }
        .ic__loop:nth-of-type(17) {
          animation-delay: -1.3333333333s;
        }
        .ic__loop:nth-of-type(18) {
          animation-delay: -1.4166666667s;
        }
        .ic__loop:nth-of-type(19) {
          animation-delay: -1.5s;
        }
        .ic__loop:nth-of-type(20) {
          animation-delay: -1.5833333333s;
        }
        .ic__loop:nth-of-type(21) {
          animation-delay: -1.6666666667s;
        }
        .ic__loop:nth-of-type(22) {
          animation-delay: -1.75s;
        }
        .ic__loop:nth-of-type(23) {
          animation-delay: -1.8333333333s;
        }
        .ic__loop:nth-of-type(24) {
          animation-delay: -1.9166666667s;
        }
        .ic__loop:nth-of-type(25) {
          animation-delay: -2s;
        }
        .ic__loop:nth-of-type(26) {
          animation-delay: -2.0833333333s;
        }
        .ic__loop:nth-of-type(27) {
          animation-delay: -2.1666666667s;
        }
        .ic__loop:nth-of-type(28) {
          animation-delay: -2.25s;
        }
        .ic__loop:nth-of-type(29) {
          animation-delay: -2.3333333333s;
        }
        .ic__loop:nth-of-type(30) {
          animation-delay: -2.4166666667s;
        }
        .ic__loop:nth-of-type(31) {
          animation-delay: -2.5s;
        }
        .ic__loop:nth-of-type(32) {
          animation-delay: -2.5833333333s;
        }
        .ic__loop:nth-of-type(33) {
          animation-delay: -2.6666666667s;
        }
        .ic__loop:nth-of-type(34) {
          animation-delay: -2.75s;
        }
        .ic__loop:nth-of-type(35) {
          animation-delay: -2.8333333333s;
        }
        .ic__loop:nth-of-type(36) {
          animation-delay: -2.9166666667s;
        }
        .ic__loop:nth-of-type(37) {
          animation-delay: -3s;
        }
        .ic__loop:nth-of-type(38) {
          animation-delay: -3.0833333333s;
        }
        .ic__loop:nth-of-type(39) {
          animation-delay: -3.1666666667s;
        }
        .ic__loop:nth-of-type(40) {
          animation-delay: -3.25s;
        }
        .ic__loop:nth-of-type(41) {
          animation-delay: -3.3333333333s;
        }
        .ic__loop:nth-of-type(42) {
          animation-delay: -3.4166666667s;
        }
        .ic__loop:nth-of-type(43) {
          animation-delay: -3.5s;
        }
        .ic__loop:nth-of-type(44) {
          animation-delay: -3.5833333333s;
        }
        .ic__loop:nth-of-type(45) {
          animation-delay: -3.6666666667s;
        }
        .ic__loop:nth-of-type(46) {
          animation-delay: -3.75s;
        }
        .ic__loop:nth-of-type(47) {
          animation-delay: -3.8333333333s;
        }
        .ic__loop:nth-of-type(48) {
          animation-delay: -3.9166666667s;
        }
        
        /* Animation */
        @keyframes loop {
          from {
            stroke-dashoffset: 0;
          }
          to {
            stroke-dashoffset: -600;
          }
        }
    </style>


</head>

<body >
    <main>
        <svg class="ic" viewBox="0 0 256 256" width="256px" height="256px" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="loop" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="hsl(53,90%,55%)"></stop>
        <stop offset="25%" stop-color="hsl(33,90%,55%)"></stop>
        <stop offset="50%" stop-color="hsl(3,90%,55%)"></stop>
        <stop offset="75%" stop-color="hsl(303,90%,35%)"></stop>
        <stop offset="100%" stop-color="hsl(223,90%,55%)"></stop>
      </linearGradient>
    </defs>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="0" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,2)"></path>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.020833333333333332" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,6)"></path>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.041666666666666664" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,10)"></path>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.0625" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,14)"></path>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.08333333333333333" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,18)"></path>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.10416666666666666" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,22)"></path>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.125" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,26)"></path>
    <path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-.........完整代码请登录后点击上方下载按钮下载查看