svg音乐波扩散动画效果代码-html代码-BFW代码库

svg音乐波扩散动画效果代码

代码语言：html

所属分类：动画

代码描述：svg音乐波扩散动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body{
          height: 100%;
          width: 100%;
        }
        
        body{
          align-items: center;
          background: black;
          display: flex;
          justify-content: center;
        }
        
        @media (orientation: landscape) {
          #visual{
            height: 45vh;
            width: 45vh;
          }
        }
        
        @media (orientation: portrait) {
          #visual{
            height: 45vw;
            width: 45vw;
          }
        }
    </style>




</head>

<body translate="no">
    <div id="visual">
        <svg viewBox="0 0 320 320">
    <defs>
      <circle id="circle-clip" cx="50%" cy="50%" r="18%" />
      
      <clipPath id="avatar-clip">
        <use href="#circle-clip" />
      </clipPath>
    </defs>

    <circle cx="50%" cy="50%" r="30%" fill="white" fill-opacity="0.25" />
    
    <!-- dark ripple -->
    <circle cx="50%" cy="50%" r="25%" opacity="0" fill="black" fill-opacity="1" stroke="white" stroke-width="1%" transform-origion="50% 50%">
      <animate attributeName="r" values="0%;25%;40%" keyTimes="0;0.3;1" dur="1s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.3;1" dur="1s" repeatCount="indefinite" />
    </circle>
    
    <!-- music note -->
    <path d="M64.1419 56.9972C64.1419 63.1477 58.6364 68.1262 51.8486 68.1262C45.0581 68.1262 39.5553 63.1441 39.5553 56.9953C39.5553 50.8448 45.0578 45.863 51.8486 45.863C53.8224 45.863 55.6827 46.2964 57.3376 47.0463L57.3379 20.3459L24.7292 25.5089V64.5731C24.7292 70.7212 19.2251 75.7067 12.4352 75.7067C5.64406 75.7067 0.141907 70.7253 0.141907 64.5731C0.141907 58.425 5.64517 53.4395 12.4352 53.4395C14.4116 53.4395 16.2708 53.8721 17.925 54.6236V7.79982L64.1408 0.481689V19.2677L64.141 56.9972H64.1419Z" fill=&qu.........完整代码请登录后点击上方下载按钮下载查看