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

代码语言:html

所属分类:动画

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

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

网友评论0