TweenMax+svg实现酷炫svg文字logo入场出场动画效果代码-html代码-BFW代码库

TweenMax+svg实现酷炫svg文字logo入场出场动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现酷炫svg文字logo入场出场动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          background-color:#971416;
          overflow: hidden;
          text-align:center;
        }
        
        body,
        html {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
        
        
        svg{
         position:absolute;
          width:100%;
          height:100%;
          visibility:hidden;
          transform:translate(-50%, 0%);
        }
        
        /* svg{
         width:800px;
         height:600px;
        } */
    </style>


</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
  <defs>
   <clipPath id="outlineMask">
<rect class="outlineMask" x="160" y="50" width="480" height="347" fill="#2c292b" opacity="0.2"/>    
    </clipPath>
   <clipPath id="svgMask">

  <path d="M236.1,377c-24,0-48.3-8.4-67.4-25.4l20.6-24.7c14.3,11.8,29.3,19.3,47.4,19.3c14.3,0,22.9-5.7,22.9-15v-0.5
    c0-8.8-5.4-13.4-32-20.2c-32-8.2-52.6-17-52.6-48.5v-0.5c0-28.8,23.1-47.9,55.6-47.9c23.1,0,42.9,7.3,59,20.2l-18.1,26.3
    c-14.1-9.8-27.9-15.7-41.3-15.7s-20.4,6.1-20.4,13.8v0.5c0,10.4,6.8,13.8,34.3,20.9c32.2,8.4,50.4,20,50.4,47.6v0.5
    C294.4,359.3,270.3,377,236.1,377z"/>
  <path d="M399.4,373.9h-30.8l-64.2-155.9h38.6l41.5,109.8l41.5-109.8h37.7L399.4,373.9z"/>
  <path d="M554.3,377.4c-49.5,0-83.5-34.7-83.5-81.7v-0.5c0-45.1,35.2-82.1,83.2-82.1c28.6,0,45.8,7.7,62.4,21.8l-22,26.5
    c-12.2-10.2-23.1-16.1-41.5-16.1c-25.4,0-45.6,22.5-45.6,49.5v0.5c0,29,20,50.4,48.1,50.4c12.7,0,24-3.2,32.9-9.5v-22.7h-35.2
    v-30.2h69v69C605.8,366.1,583.4,377.4,554.3,377.4z"/>
   
    </clipPath>
    <radialGradient id="bgGrad" cx="400" cy="300" r="353.55" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#be2a33"/>
      <stop offset="1" stop-colo.........完整代码请登录后点击上方下载按钮下载查看