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

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

代码语言：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.7C5.........完整代码请登录后点击上方下载按钮下载查看