css实现跳跃曲线loading加载动画效果代码-html代码-BFW代码库

css实现跳跃曲线loading加载动画效果代码

代码语言：html

代码描述：css实现跳跃曲线loading加载动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
        }

        canvas {
            display: block;
        }

        body {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background: #1245bf;
        }

        svg {
            position: relative;
            width: 100%;
        }
        svg path {
            stroke-dasharray: 480;
            stroke-dashoffset: 480;
        }
        svg path:nth-child(1) {
            animation: dash 2s 0.4s linear infinite;
        }
        svg path:nth-child(2) {
            animation: dash 2s 0.8s linear infinite;
        }
        svg path:nth-child(3) {
            animation: dash 2s 1.2s linear infinite;
        }
        svg path:nth-child(4) {
            animation: dash 2s 1.6s linear infinite;
        }
        svg path:nth-child(5) {
            animation: dash 2s 2s linear infinite;
        }

@keyframes dash {
            0% {
                stroke-dashoffset: 480;
            }
            25% {
                stroke-dashoffset: 960;
            }
            50% {
                stroke-dashoffset: 1440;
            }
            100% {
                stroke-dashoffset: 1440;
            }
        }
    </style>




</head>

<body>
    <figure class="wm-ripple__figure">
        <svg width="1440" height="226" viewBox="0 0 1440 226" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M255 188C255 103.5 186.5 35 102 35C17.5004 35 -51 103.5 -51 188" stroke="url(#paint4_linear)" stroke-width="70" stroke-linecap="round" />
            <path d="M563 188C563 103.5 494.5 35 410 35C325.5 35 257 103.5 257 188" stroke="url(#paint0_linear)" stroke-width="70" stroke-linecap="round" />
            <path d="M869 188C869 103.5 800.5 35 716 35C631.5 35 563 103.5 563 188" stroke="url(#paint1_linear)" stroke-width="70" stroke-linecap="round" />
            <path d="M1175 188C1175 103.5 1106.5 35 1022 35C937.5 35 869 103.5 869 188" stroke="url(#paint2_linear)" stroke-width="70" stroke-linecap="round" />
            <path d="M1481 188C1481 103.5 1412.5 35 1328 35C1243.5 35 1175 103.5 1175 188" stroke="url(#paint3_linear)" stroke-width="70" stroke-linecap=&qu.........完整代码请登录后点击上方下载按钮下载查看