TweenMax+svg实现人行走动画效果代码-html代码-BFW代码库

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

代码语言：html

所属分类：动画

代码描述：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 it is ,</span> Just Keep Going</div>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="325" height="325" viewBox="15 0 315 315">
  <circle fill="white" cx="172" cy="165" r="150" stroke='rgba(255,255,255,.4)' stroke-width='30'/>
  <ellipse id="mSH" opacity='.2' cx="175" cy="313" rx="110" ry="10"/>
  <g id="B">
      <g id="UB">
      <g id="H">
        <path d="M188.8.2c-9.1-.3-16.2 7.3-16.2 15.4 0 8.9 7.2 13.8 7.2 13.8s1.3 3.8 0 6.9c-2.1 4.8-6.6 11.1-6.6 11.1l17.6 8.9s-3.8-8.4-2.2-13.8c.8-2.9 4.7-3.5 6.9-3.1 3.8 3.7 7.7 5.5 9.1 4.6 1.9-1.2 4.9-18.4 4.5-26.8-.4-8.5-9.5-16.3-20.3-17z"/>
        <g fill='none' stroke='#fff' opacity='0.4'>
        <path d="M191.1.3s4 4.4 4.9 17.9-.9 21-.9 21"/>
        <path d="M172.6 16.2s8.2 2.1 19.2 2.4c11.5.3 17.4-1.5 17.4-1.5"/>
        </g>
        <g fill='none' stroke='#fff' opacity='0.7' stroke-linecap='round' stroke-width='3' >
       	<path class="st4" d="M181,7.1c-0.8,0.7-1.6,1.4-2.2,2.3"/>
		<path class="st4" d="M198.6,7.6c-4.1-2.8-9.3-4.3-14-2.6".........完整代码请登录后点击上方下载按钮下载查看