anime+svg实现波纹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：anime+svg实现波纹动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
          margin: 0;
          background: #eec0c0;
          font-family: 'Pacifico', cursive;
          user-select: none;
        }
        
        svg{
          width: 100vmin;
          border: 4px solid #001220;
          padding: 10px;
          margin: 10px;
        }
        
        .content-wrapper{
          width: 100%;
          height: 100%;
          position: absolute;
          display: grid;
          align-items: center;
          justify-content: center;
        }
        
        .title-text{
          width: 100%;
          text-align: center;
          color: #001220;
          font-size: 5vmin;
        }
        
        .text-muted{
          width: 100%;
          text-align: center;
          color: gray;
          font-size: 3vmin;
        }
    </style>




</head>

<body>

    <div class="content-wrapper">

        <svg id="visual" viewBox="0 0 900 600">
    <rect x="0" y="0" width="900" height="600" fill="#001220"></rect>
    <path class="far-background" d="M0 398L21.5 397.3C43 396.7 86 395.3 128.8 389.2C171.7 383 214.3 372 257.2 369.5C300 367 343 373 385.8 379.2C428.7 385.3 471.3 391.7 514.2 387C557 382.3 600 366.7 642.8 365.5C685.7 364.3 728.3 377.7 771.2 383.2C814 388.7 857 386.3 878.5 385.2L900 384L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#fa7268" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
    <path class="background" d="M0 463L21.5 454.2C43 445.3 86 427.7 128.8 417.8C171.7 408 214.3 406 257.2 412.5C300 419 343 434 385.8 434C428.7 434 471.3 419 514.2 416.7C557 414.3 600 424.7 642.8 433.7C685.7 442.7 728.3 450.3 771.2 449.2C814 448 857 438 878.5 433L900 428L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#ef5f67" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
    <path class="center" d="M0 471L21.5 465.5C43 460 86 449 128.8 453.3C171.7 457.7 214.3 477.3 257.2 488.2C300 499 343 501 385.8 500C428.7 499 471.3 495 514.2 487.7C557 480.3 600 469.7 642.8 468.5C685.7 467.3 728.3 475.7 771.2 478.5C814 481.3 857 478.7 878.5 477.3L900 476L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#e34c67" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
    <path class="foreground" d="M0 510L21.5 506.2C43 502.3 86 494.7 128.8 494.7C171.7 494.7 214.3 502.3 257.2 511.5C300 520.7 343 531.3 385.8 532.2C428.7 533 471.3 524 514.2 518.8C557 513.7 600 512.3 642.8 511.8C685.7 511.3 728.3 511.7 771.2 507.2C814 502.7 857 493.3 878.5 488.7L900 484L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#d53867" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
    <path class="far-foreground" d="M0 569L21.5 567.5C43 566 86 563 128.8 562.5C171.7 562 214.3 564 257.2 559.7C300 555.3 343 544.7 385.8 539.7C428.7 534.7 471.3 535.3 514.2 540.2C557 545 600 554 642.8 555.8C685.7 557.7 728.3 552.3 771.2 553.7C814 555 857 563 878.5 567L900 571L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#c62368" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
  </svg>

    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.1.js"></script>
    <script>
        const animate = (target, value1, value2, value3) => {
          anime({
            targets: target,
            d: [
            { value: value1 },
            { value: value2 },
            { value: value3 }],
        
            loop: true,
            duration: 2000,
            direction: 'alternate',
            easing: 'easeOutQuad' });
        
        };
        
        animate(
        '.far-background',
        "M0 444L21.5 442.8C43 441.7 86 439.3 128.8 436C171.7 432.7 214.3 428.3 257.2 416C300 403.7 343 383.3 385.8 385.7C428.7 388 471.3 413 514.2 416.3C557 419.7 600 401.3 642.8 398.8C685.7 396.3 728.3 409.7 771.2 408.7C814 407.7 857 392.3 878.5 384.7L900 377L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
        "M0 412L21.5 408C43 404 86 396 128.8 386.8C171.7 377.7 214.3 367.3 257.2 375.5C300 383.7 343 410.3 385.8 415.2C428.7 420 471.3 403 514.2 389.2C557 375.3 600 364.7 642.8 366.7C685.7 368.7 728.3 383.3 771.2 390.3C814 397.3 857 396.7 878.5 396.3L900 396L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
        "M0 383L21.5 390.8C43 398.7 86 414.3 128.8 409C171.7 403.7 214.3 377.3 257.2 376.8C300 376.3 343 401.7 385.8 413.5C428.7 425.3 471.3 423.7 514.2 426.7C557 429.7 600 437.3 642.8 428.3C685.7 419.3 728.3 393.7 771.2 383.2C814 372.7 857 377.3 878.5 379.7L900 382L900 601L878.5 601C857 601 814 .........完整代码请登录后点击上方下载按钮下载查看