TweenMax+svg实现人行走动画效果代码

代码语言:html

所属分类:动画

代码描述:TweenMax+svg实现人行走动画效果代码

代码标签: TweenMax svg 行走 动画

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

<html>

<head>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Oswald);
        html,
        body {
          width: 100%;
          height: 100%;
          padding: 0px;
          margin: 0px;
        }
        
        body {
          background-color: #efefef;
          background: radial-gradient(rgb(110 253 253), rgb(0 55 157));
        }
        
        svg {
          opacity: 0;
          overflow: visible;
          position: absolute;
          left: 50%;
          top: 53%;
          transform: translate(-50%, -50%);
        }
        
        #text {
          position: absolute;
          left: 50%;
          top: 20px;
          width: 100%;
          transform: translate(-50%, 0%);
          font-family: 'Oswald', arial;
          color: #ED002E;
          font-size: 50px;
          font-size: 5.5vw;
          text-align: center;
          white-space: nowrap;
        }
        
        #text span {
          color: #444;
          font-size: 30px;
          font-size: 3.5vw;
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
</head>

<body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<div id="text"><span>No Matter How Hard i.........完整代码请登录后点击上方下载按钮下载查看

网友评论0