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

代码语言:html

所属分类:动画

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

代码标签: 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="#0012.........完整代码请登录后点击上方下载按钮下载查看

网友评论0