svg遮罩文字填充动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg遮罩文字填充动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background: url(//repo.bfw.wiki/bfwrepo/image/607aa1b0d81d0.png) ;
        background-color: #00000;
        background-position: center;
        background-repeat: no-repeat; 
        background-size: cover;
          
        }
        
        svg {
          flex: 1 1 auto;
          max-width: 60vw;
        }
        #lights{
          transform: translateY(-20px);
        }
        #bigCity {
          animation: spin 10s forwards ease-in-out;
        
        }
        .city-gif{
          transform: translateY(-90px);
        }
        @keyframes spin {
          0% {
            transform: translateY(70px);  
          }
          
          100% {
            transform: translateY(-0px);  
          }
        }
    </style>



</head>

<body>

    <svg viewBox="0 0 316.09 164.72" aria-labelledby="Big City Lights" role="img">
      <title id="cityLights">Big City Lights</title>

      <clipPath id="bigCity" fill="none"
          stroke="#000"
          stroke-miterlimit="10">
        <path
          d="M529.08,223.85V185.56h12.36q6.54,0,9.8,2.29a7.87,7.87,0,0,1,3.27,6.91,11.36,11.36,0,0,1-.34,2.8,8.7,8.7,0,0,1-1,2.51,8.23,8.23,0,0,1-1.76,2,7.88,7.88,0,0,1-2.49,1.37,9,9,0,0,1,2.74.93,8.26,8.26,0,0,1,2.29,1.78,8.43,8.43,0,0,1,1.55,2.6,9.29,9.29,0,0,1,.57,3.34q0,5.85-3.92,8.8t-11.34,2.94ZM547,196a5.34,5.34,0,0,0-.35-2,3.57,3.57,0,0,0-1.13-1.49,5.68,5.68,0,0,0-2-1,11.38,11.38,0,0,0-2.95-.33h-4.36v10.13h4.36a9.22,9.22,0,0,0,3-.42,5.47,5.47,0,0,0,2-1.17,4.25,4.25,0,0,0,1.11-1.72A6.09,6.09,0,0,0,547,196ZM541.27,218a9.58,9.58,0,0,0,3-.44,6.29,6.29,0,0,0,2.18-1.22,5.07,5.07,0,0,0,1.33-1.83,5.5,5.5,0,0,0,.46-2.26,4.6,4.6,0,0,0-1.86-3.89q-1.86-1.41-5.7-1.41h-4.48V218Z"
          transform="translate(-501.43 -180.76)"
          
        />
        <path
          d="M572,199.66h-8.41v-5.57h15.73v24.2h8.59v5.56H562.54v-5.56H572Zm7.91-13.72a4.8,4.8,0,0,1-.35,1.82,4.55,4.55,0,0,1-1,1.48,4.89,4.89,0,0,1-1.48,1,4.69,4.69,0,0,1-1.85.36,4.64,4.64,0,0,1-3.35-1.36,4.4,4.4,0,0,1-1-1.48,4.77,4.77,0,0,1,1-5.13,4.6,4.6,0,0,1,3.35-1.37,4.69,4.69,0,0,1,1.85.36,4.92,4.92,0,0,1,1.48,1,4.72,4.72,0,0,1,1.33,3.31Z"
          transform="translate(-501.43 -180.76)"
         
        />
        <path
          d="M617.67,199.3a6.33,6.33,0,0,1,1.16,2.16,8.16,8.16,0,0,1,.34,2.3,10.46,10.46,0,0,1-.87,4.39,8.66,8.66,0,0,1-2.43,3.2,10.59,10.59,0,0,1-3.75,1.94,16.57,16.57,0,0,1-4.82.66,13,13,0,0,1-2.87-.3,7.27,7.27,0,0,1-2-.72,5.31,5.31,0,0,0-.85,1.1,2.58,2.58,0,0,0-.35,1.36,2.07,2.07,0,0,0,.23.94,2.58,2.58,0,0,0,.69.83,3.74,3.74,0,0,0,1.08.6,4.23,4.23,0,0,0,1.43.26l7.06.27a17.48,17.48,0,0,1,4.29.6,10.12,10.12,0,0,1,3.29,1.54,7,7,0,0,1,2.13,2.41,6.85,6.85,0,0,1,.74,3.24,8.61,8.61,0,0,1-.93,3.93,9,9,0,0,1-2.83,3.21,15.15,15.15,0,0,1-4.7,2.15,24.21,24.21,0,0,1-6.54.79,29.2,29.2,0,0,1-6.19-.57,13.44,13.44,0,0,1-4.25-1.6,6.89,6.89,0,0,1-2.45-2.44,6.4,6.4,0,0,1-.79-3.12,6.48,6.48,0,0,1,.27-1.91,6.27,6.27,0,0,1,.79-1.68,9,9,0,0,1,1.32-1.57,14.45,14.45,0,0,1,1.87-1.52,5.75,5.75,0,0,1-2.18-2.11,5.4,5.4,0,0,1-.75-2.76,6.58,6.58,0,0,1,.26-1.86,9.58,9.58,0,0,1,.69-1.65,12.39,12.39,0,0,1,1-1.53c.38-.48.77-1,1.18-1.43a8.83,8.83,0,0,1-1.8-2.62,9.11,9.11,0,0,1-.72-3.86,10.48,10.48,0,0,1,.89-4.44,9.38,9.38,0,0,1,2.48-3.28,10.79,10.79,0,0,1,3.76-2,15.73,15.73,0,0,1,4.76-.69,23,23,0,0,1,2.54.14,10.29,10.29,0,0,1,2.21.45h10.31v5.21Zm-16.84,28.51a2.69,2.69,0,0,0,1.74,2.55,11.76,11.76,0,0,0,4.91.82,13.26,13.26,0,0,0,3.41-.38,7.38,7.38,0,0,0,2.27-1,3.61,3.61,0,0,0,1.26-1.43,4.08,4.08,0,0,0,.38-1.7,2.39,2.39,0,0,0-.36-1.34,2.93,2.93,0,0,0-1-.9,5.55,5.55,0,0,0-1.55-.56,12.72,12.72,0,0,0-2-.25l-6.3-.12a10.51,10.51,0,0,0-1.39,1.12,4.86,4.86,0,0,0-.85,1,3.13,3.13,0,0,0-.41,1A5.66,5.66,0,0,0,600.83,227.81Zm1.2-23.88a5.08,5.08,0,0,0,1.39,3.77,5.24,5.24,0,0,0,3.88,1.39,5.62,5.62,0,0,0,2.3-.44,4.58,4.58,0,0,0,1.63-1.17,4.84,4.84,0,0,0,1-1.7,6.24,6.24,0,0,0,.33-2,4.84,4.84,0,0,0-5.28-5.28,5.65,5.65,0,0,0-2.3.44,4.67,4.67,0,0,0-1.62,1.19,5.11,5.11,0,0,0-1,1.74A6.9,6.9,0,0,0,602,203.93Z"
          transform="translate(-501.43 -180.76)"
          
        />
        <path
          d="M686.67,222.36a29.5,29.5,0,0,1-4.94,1.52,23.74,23.74,0,0,1-5,.5,20.31,20.31,0,0,1-7.3-1.21,13.84,13.84,0,0,1-5.37-3.62,16,16,0,0,1-3.31-6,30.92,30.92,0,0,1,.11-16.88,17.94,17.94,0,0,1,3.51-6.36A15.11,15.11,0,0,1,670,186.4a18.9,18.9,0,0,1,7.34-1.36c.88,0,1.71,0,2.48.06s1.53.11,2.27.21,1.49.25,2.25.43,1.56.4,2.38.67v7.15a22.77,22.77,0,0,0-4.75-1.67,19.28,19.28,0,0,0-4.1-.5,10.12,10.12,0,0,0-4.66,1,8.53,8.53,0,0,0-3.18,2.75,12.19,12.19,0,0,0-1.83,4.22,23.08,23.08,0,0,0-.58,5.37,23.45,23.45,0,0,0,.6,5.56,11.42,11.42,0,0,0,1.86,4.14,8.09,8.09,0,0,0,3.22,2.59,11.1,11.1,0,0,0,4.66.9,13.4,13.4,0,0,0,2.09-.19c.75-.13,1.52-.3,2.29-.5s1.53-.45.........完整代码请登录后点击上方下载按钮下载查看