gsap+anime实现文字消散拼接动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+anime实现文字消散拼接动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">



    <style>
        body {
          font-family: "Lato", sans-serif;
        }
        
        .container {
          width: 100vw;
          height: 100vh;
          background: #232323;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        svg {
          fill: #F6EF03;
          fill: #00AEEF;
          fill: #fff;
          fill: #000;
          width: 50%;
        }
        
        .cls-1 {
          fill: #000;
        }
    </style>



</head>

<body>
    <div class="container">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1056 248"><defs><style></style></defs><path d="M85,184q0,19.58-16.82,19.57h-.47v30.6q23.84-.13,36.41-13.77t12.69-38.84V151.22H85ZM104.1,27.66Q91.53,14,67.69,13.89v30.6h.47Q85,44.48,85,64.36V89.13h31.81V66.5Q116.79,41.42,104.1,27.66Z"/><path d="M224.14,144.49q-5.87-11.09-19-24l-24,24a78.33,78.33,0,0,1,11.19,13.88,45.38,45.38,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.29,5.05-13,5.05q-17.45,0-17.44-20.8V168H131.77v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.78-14.07t13-40.37Q232.09,159.48,224.14,144.49Z"/><path d="M337.92,144.49Q330.55,130.66,312,114L288.08,137.9q12.81,11.76,18,20.5a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.31,5.05-13,5.05q-17.43,0-17.43-20.8V168H245.55v12.24q0,26,12.54,39.9t37,13.93q24.76,0,37.78-14.07t13-40.37Q345.87,159.48,337.92,144.49Z"/><path d="M485.65,17h-24V54.27h.16l15,105.82H461.63v29.06h19.12v-.61l6.12,42.51h33.64Z"/><path d="M637.34,219.88a142.71,142.71,0,0,1-.62-14.83V167.43q0-19-5-30.28a26.24,26.24,0,0,0-17.28-15v-.61q22-8.86,22-42.2V66.19q0-25.08-11.93-37.16T586.56,17h-.14v30.6q8.28.23,12.23,5.19,4.13,5.19,4.12,16.82V86.07q0,12.24-5,17.44c-2.69,2.76-6.47,4.44-11.31,5v31q8.15.93,11.93,5.56,4.73,5.82,4.73,20.5v39.15a149.24,149.24,0,0,0,.61,16.51,49.33,49.33,0,0,0,2.45,9.79h34.25A37.28,37.28,0,0,1,637.34,219.88Z"/><path d="M702.64,17v214.1h16.67V47.54h35.17V17Z"/><path d="M787.06,17v214.1h17.27V17Z"/><path d="M916,144.49q-6.65-12.5-22.39-27.3l-24,24q10.08,9.74,14.56,17.24a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.44,16.36s-7.3,5.05-13,5.05q-17.43,0-17.43-20.8V168H823.6v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.77-14.07t13-40.37Q923.92,159.48,916,144.49Z"/><path d="M986.31,17v214.1h16.83V47.54h35.17V17Z"/><rect class="cls-1" x="44.45" y="87.82" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="70.21" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,52.59v3.6h7.81a20,20,0,0,1,1.28-3.6Z"/><rect class="cls-1" x="44.45" y="34.97" width="23.25" height="3.6"/><path class="cls-1" d="M67.69,21v-3.6H45.9c-.5.19-1,.39-1.45.59v3Z"/><rect class="cls-1" x="44.45" y="79.01" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,61.4V65h6.88v-.64c0-1,.05-2,.12-3Z"/><path class="cls-1" d="M44.45,43.78v3.6H57.77a16.88,16.88,0,0,1,9.92-2.89v-.71Z"/><rect class="cls-1" x="44.45" y="26.16" width="23.25" height="3.6"/><rect class="cls-1" x="44.14" y="87.82" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="34.97" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,21v-3l-.31.12V21Z"/><rect class="cls-1" x="44.14" y="79.01" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="44.45" y="175.91" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="158.29" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="140.67" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="123.06" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="105.44" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="167.1" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="149.48" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="131.86" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="114.25" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="96.63" width="6.89" height="3.6"/><rect class="cls-1" x="44.14" y="175.91" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="158.29" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="140.67" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="123.06" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="105.44" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="167.1" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="149.48" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="131.86" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="114.25" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="96.63" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,228.76v1.3a48.89,48.89,0,0,0,7.08,2.3H67.69v-3.6Z"/><rect class="cls-1" x="44.45" y="211.14" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,193.53v3.6h10a16.37,16.37,0,0,1-1.7-3.6Z"/><rect class="cls-1" x="44.45" y="219.95" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,205.93H67.69v-2.42A19.78,19.78,0,0,1,61,202.33H44.45Z"/><path class="cls-1" d="M44.45,184.72v3.6h7.13c-.14-1.14-.2-2.34-.23-3.6Z"/><path class="cls-1" d="M44.14,228.76v1.18l.31.12v-1.3Z"/><rect class="cls-1" x="44.14" y="211.14" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="193.53" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="219.95" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="202.33" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="184.72" width="0.31" height="3.6"/><polygon class="cls-1" points="43.83 87.82 17.69 87.82 17.69 91.42 43.83 91.42 44.14 91.42 44.14 87.82 43.83 87.82"/><polygon class="cls-1" points="43.83 70.2 17.69 70.2 17.69 73.81 43.83 73.81 44.14 73.81 44.14 70.2 43.83 70.2"/><path class="cls-1" d="M43.83,52.59h-25c-.2,1.17-.37,2.37-.52,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,35H25c-.67,1.16-1.3,2.36-1.88,3.6h21V35Z"/><path class="cls-1" d="M43.83,21h.31V18.06A42.69,42.69,0,0,0,38.55,21Z"/><polygon class="cls-1" points="43.83 79.01 17.69 79.01 17.69 82.61 43.83 82.61 44.14 82.61 44.14 79.01 43.83 79.01"/><path class="cls-1" d="M43.83,61.4h-26c-.07,1.18-.11,2.38-.13,3.6H44.14V61.4Z"/><path class="cls-1" d="M43.83,43.78H21q-.59,1.76-1.08,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,26.16h-12c-.5.49-1,1-1.46,1.5-.63.68-1.22,1.38-1.8,2.1H44.14v-3.6Z"/><polygon class="cls-1" points="43.83 175.91 17.69 175.91 17.69 179.51 43.83 179.51 44.14 179.51 44.14 175.91 43.83 175.91"/><polygon class="cls-1" points="43.83 158.29 17.69 158.29 17.69 161.89 43.83 161.89 44.14 161.89 44.14 158.29 43.83 158.29"/><polygon class="cls-1" points="43.83 140.67 17.69 140.67 17.69 144.27 43.83 144.27 44.14 144.27 44.14 140.67 43.83 140.67"/><polygon class="cls-1" points="43.83 123.06 17.69 123.06 17.69 126.66 43.83 126.66 44.14 126.66 44.14 123.06 43.83 123.06"/><polygon class="cls-1" points="43.83 105.44 17.69 105.44 17.69 109.04 43.83 109.04 44.14 109.04 44.14 105.44 43.83 105.44"/><polygon class="cls-1" points="43.83 167.1 17.69 167.1 17.69 170.7 43.83 170.7 44.14 170.7 44.14 167.1 43.83 167.1"/><polygon class="cls-1" points="43.83 149.48 17.69 149.48 17.69 153.08 43.83 153.08 44.14 153.08 44.14 149.48 43.83 149.48"/><polygon class="cls-1" points="43.83 131.86 17.69 131.86 17.69 135.46 43.83 135.46 44.14 135.46 44.14 131.86 43.83 131.86"/><polygon class="cls-1" points="43.83 114.25 17.69 114.25 17.69 117.85 43.83 117.85 44.14 117.85 44.14 114.25 43.83 114.25"/><polygon class="cls-1" points="43.83 96.63 17.69 96.63 17.69 100.23 43.83 100.23 44.14 100.23 44.14 96.63 43.83 96.63"/><path class="cls-1" d="M43.83,228.76H41.58c.83.42,1.69.81,2.56,1.18v-1.18Z"/><path class="cls-1" d="M43.83,211.14H24c.65,1.24,1.34,2.45,2.09,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,193.53H18.51c.18,1.22.4,2.42.64,3.6h25v-3.6Z"/><path class="cls-1" d="M43.83,220H30.05c.11.13.22.27.34.39a38.77,38.77,0,0,0,3.33,3.21H44.14V220Z"/><path class="cls-1" d="M43.83,202.33H20.44c.36,1.23.76,2.44,1.2,3.6h22.5v-3.6Z"/><path class="cls-1" d="M43.83,184.72H17.75c0,1.22.11,2.41.2,3.6H44.14v-3.6Z"/><rect class="cls-1" x="220.62" y="70.21" width="10.86" height="3.6"/><path class="cls-1" d="M220.62,52.59v3.6h10.17c-.15-1.23-.32-2.43-.53-3.6Z"/><path class="cls-1" d="M220.62,35v3.6H226q-.85-1.86-1.83-3.6Z"/><path class="cls-1" d="M220.62,61.4V65h10.82c0-1.22-.08-2.43-.15-3.6Z"/><path class="cls-1" d="M220.62,43.78v3.6h8.51c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M220.62,29.76h.11l-.11-.15Z"/><rect class="cls-1" x="220.31" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="43.78" width="0.31" height="3.6"/><path class="cls-1" d="M220.31,29.25v.51h.31v-.15Z"/><path class="cls-1" d="M175.63,91.42c-1-1.24-1.83-2.44-2.59-3.6H135.28c.36,1.22.75,2.42,1.18,3.6Z"/><path class="cls-1" d="M132.66,73.8H167c-.27-1.18-.47-2.38-.63-3.59H132.53V72C132.57,72.58,132.61,73.2,132.66,73.8Z"/><polygon class="cls-1" points="220.01 70.2 199.67 70.2 199.67 73.81 220.01 73.81 220.31 73.81 220.31 70.2 220.01 70.2"/><path class="cls-1" d="M133.06,56.19h34a19.31,19.31,0,0,1,1.31-3.6H133.6C133.39,53.76,133.22,55,133.06,56.19Z"/><path class="cls-1" d="M220,52.59H197.34a21.07,21.07,0,0,1,1.29,3.6h21.68v-3.6Z"/><path class="cls-1" d="M220,35H139.92c-.68,1.16-1.32,2.36-1.91,3.6h82.3V35Z"/><path class="cls-1" d="M211,21a41.51,41.51,0,0,0-7.25-3.6H161a43.55,43.55,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M134,82.61h36.13c-.57-1.18-1.1-2.38-1.55-3.6H133.29Q133.57,80.84,134,82.61Z"/><path class="cls-1" d="M166,65v0c0-1.26.06-2.43.16-3.57H132.56l0,.63v3Z"/><path class="cls-1" d="M220,61.4H199.48c.1,1.14.16,2.33.18,3.6h20.65V61.4Z"/><path class="cls-1" d="M220,43.78H135.88q-.6,1.76-1.11,3.6h37.8q4-2.9,10.28-2.9a16.93,16.93,0,0,1,10.23,2.9h27.23v-3.6Z"/><path class="cls-1" d="M219.1,27.8c-.5-.56-1-1.11-1.55-1.64H146.84c-.55.53-1.09,1.08-1.61,1.64s-1.14,1.29-1.69,2h76.77v-.51C219.92,28.76,219.52,28.27,219.1,27.8Z"/><path class="cls-1" d="M132.53,70.21h-.08c0,.58.05,1.17.08,1.76Z"/><path class="cls-1" d="M132.53,65V62c-.05,1-.09,2-.11,3Z"/><path class="cls-1" d="M185,140.67h-7.74c1.28,1.23,2.51,2.43,3.65,3.6h.49Z"/><path class="cls-1" d="M202.6,123.06H158.32q1.76,1.77,3.64,3.6h37Z"/><path class="cls-1" d="M192.69,109q-2.07-1.85-3.94-3.6H143.62q1.19,1.77,2.53,3.6Z"/><path class="cls-1" d="M193.79,131.86H167.55l2.15,1.93c.65.56,1.26,1.12,1.89,1.67h18.6Z"/><path class="cls-1" d="M202.46,117.85q-1.87-1.78-3.89-3.6H150.26q1.5,1.77,3.15,3.6Z"/><path class="cls-1" d="M140.45,100.23h43c-1.2-1.23-2.34-2.43-3.4-3.6H138.62Q139.48,98.46,140.45,100.23Z"/><rect class="cls-1" x="313.45" y="70.21" width="31.81" height="3.6"/><path class="cls-1" d="M311.11,52.59a20.25,20.25,0,0,1,1.3,3.6h32.16c-.16-1.23-.33-2.43-.53-3.6Z"/><path class="cls-1" d="M308.7,35v3.6h31.11c-.57-1.24-1.18-2.44-1.84-3.6Z"/><path class="cls-1" d="M324.75,21a42,42,0,0,0-7.26-3.6H308.7V21Z"/><path class="cls-1" d="M313.26,61.4c.1,1.14.16,2.33.18,3.6h31.78c0-1.22-.08-2.43-.16-3.6Z"/><path class="cls-1" d="M308.7,43.78v3.6h34.21c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M308.7,29.76h25.8c-.52-.67-1.06-1.32-1.62-2s-1-1.11-1.56-1.64H308.7Z"/><rect class="cls-1" x="308.4" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="26.16" width="0.31" height="3.6"/><polygon class="cls-1" points="308.7 114.25 308.7 117.27 311.73 114.25 308.7 114.25"/><polygon class="cls-1" points="308.4 114.25 308.4 117.58 308.7 117.27 308.7 114.25 308.4 114.25"/><path class="cls-1" d="M289.41,91.42q-1.44-1.86-2.6-3.6H249.05c.37,1.22.76,2.42,1.19,3.6Z"/><path class="cls-1" d="M280.77,73.8c-.26-1.18-.47-2.38-.62-3.59H246.23c0,1.21.11,2.41.21,3.59Z"/><path class="cls-1" d="M246.84,56.19h34a20.05,20.05,0,0,1,1.32-3.6H247.38Q247.07,54.35,246.84,56.19Z"/><path class="cls-1" d="M308.09,35H253.7c-.68,1.16-1.32,2.36-1.91,3.6H308.4V35Z"/><path class="cls-1" d="M308.09,21h.31v-3.6H274.81a43.19,43.19,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M283.86,82.61c-.57-1.18-1.1-2.38-1.56-3.6H247.07c.19,1.22.4,2.42.65,3.6Z"/><path class="cls-1" d="M279.81,65v0c0-1.26.06-2.43.15-3.57H246.34c-.07,1.17-.12,2.38-.14,3.6Z"/><path class="cls-1" d="M308.09,43.78H249.66c-.4,1.17-.78,2.37-1.11,3.6h37.8q3.94-2.9,10.28-2.9a17,17,0,0,1,10.23,2.9h1.54v-3.6Z"/><path class="cls-1" d="M308.09,26.16H260.62c-.55.53-1.09,1.08-1.61,1.64s-1.15,1.29-1.69,2H308.4v-3.6Z"/><path class="cls-1" d="M302.92,123.06H272.09q1.76,1.77,3.64,3.6h23.59Z"/><path class="cls-1" d="M306.46,109q-2.06-1.85-3.94-3.6H257.4c.78,1.18,1.63,2.38,2.53,3.6Z"/><path class="cls-1" d="M294.11,131.86H281.32l2.16,1.93,1.9,1.67h5.13Z"/><path class="cls-1" d="M308.09,114.25H264c1,1.18,2,2.38,3.14,3.6h40.95l.27-.27v-3.33Z"/><path class="cls-1" d="M254.22,100.23h43q-1.81-1.85-3.4-3.6h-41.4C253,97.85,253.58,99.05,254.22,100.23Z"/><polygon class="cls-1" points="456.02 91.42 456.52 87.82 428.53 87.82 427.94 91.42 456.02 91.42"/><polygon class="cls-1" points="431.4 70.2 430.81 73.81 458.47 73.81 458.97 70.2 431.4 70.2"/><polygon class="cls-1" points="434.27 52.59 433.68 56.19 460.91 56.19 461.18 54.27 461.63 54.27 461.63 52.59 434.27 52.59"/><polygon class="cls-1" points="437.14 34.97 436.55 38.57 461.63 38.57 461.63 34.97 437.14 34.97"/><polygon class="cls-1" points="461.63 20.95 461.63 17.35 440.01 17.35 439.42 20.95 461.63 20.95"/><polygon class="cls-1" points="429.97 79.01 429.38 82.61 457.25 82.61 457.74 79.01 429.97 79.01"/><polygon class="cls-1" points="432.83 61.4 432.25 65 459.69 65 460.19 61.4 432.83 61.4"/><polygon class="cls-1" points="435.7 43.78 435.12 47.38 461.63 47.38 461.63 43.78 435.7 43.78"/><polygon class="cls-1" points="438.57 26.16 437.99 29.76 461.63 29.76 461.63 26.16 438.57 26.16"/><polygon class="cls-1" points="461.63 179.51 461.63 175.91 414.19 175.91 413.6 179.51 461.63 179.51"/><polygon class="cls-1" points="417.06 158.29 416.47 161.89 461.63 161.89 461.63 160.09 446.5 160.09 446.75 158.29 417.06 158.29"/><polygon class="cls-1" points="419.92 140.67 419.34 144.27 448.69 144.27 449.19 140.67 419.92 140.67"/><polygon class="cls-1" points="422.79 123.06 422.21 126.66 451.13 126.66 451.63 123.06 422.79 123.06"/><polygon class="cls-1" points="425.66 105.44 425.08 109.04 453.58 109.04 454.08 105.44 425.66 105.44"/><polygon class="cls-1" points="415.62 167.1 415.04 170.7 461.63 170.7 461.63 167.1 415.62 167.1"/><polygon class="cls-1" points="418.49 149.48 417.9 153.08 447.47 153.08 447.97 149.48 418.49 149.48"/><polygon class="cls-1" points="421.36 131.86 420.77 135.46 449.91 135.46 450.41 131.86 421.36 131.86"/><polygon class="cls-1" points="424.23 114.25 423.64 117.85 452.36 117.85 452.86 114.25 424.23 114.25"/><polygon class="cls-1" points="427.1 96.63 426.51 100.23 454.8 100.23 455.3 96.63 427.1 96.63"/><polygon class="cls-1" points="405.58 228.76 405.21 231.05 436.4 231.05 436.74 228.76 405.58 228.76"/><polygon class="cls-1" points="408.45 211.14 407.86 214.74 438.78 214.74 439.31 211.14 408.45 211.14"/><polygon class="cls-1" points="411.32 193.53 410.73 197.13 441.36 197.13 441.88 193.53 411.32 193.53"/><polygon class="cls-1" points="407.01 219.95 406.43 223.55 437.5 223.55 438.02 219.95 407.01 219.95"/><polygon class="cls-1" points="409.88 202.33 409.3 205.93 440.07 205.93 440.6 202.33 409.88 202.33"/><polygon class="cls-1" points="412.75 184.72 412.17 188.31 461.63 188.31 461.63 184.72 412.75 184.72"/><rect class="cls-1" x="572.96" y="34.97" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="17.35" width=&q.........完整代码请登录后点击上方下载按钮下载查看