TweenMax实现小人行走走路动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax实现小人行走走路动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #216BB6;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
max-width: 100%;
height: 100%;
visibility: hidden;
}
.bush {
opacity: 0.2;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="pop" class="pop" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" opacity="1">
<circle cx="18.22" cy="17.89" r="0" stroke="#F3F1E2" fill="none"/>
<line x1="18" y1="10.5" x2="18" y2="0.5"/>
<line x1="18" y1="25.5" x2="18" y2="35.5"/>
<line x1="25.5" y1="18" x2="35.5" y2="18"/>
<line x1="10.5" y1="18" x2="0.5" y2="18"/>
</g>
<path id="dislike" d="M.63,10.86A2.4,2.4,0,0,0,0,12.52,2.52,2.52,0,0,0,2.51,15H7.38a16.46,16.46,0,0,0-.69,4.23v.85A3.36,3.36,0,0,0,10,23.47h.85a.84.84,0,0,0,.82-.63L12.18,21c.62-2.54,2.66-5.37,4.76-5.87a2.52,2.52,0,0,0,2.33,1.6h5a.83.83,0,0,0,.84-.84V.85A.84.84,0,0,0,24.29,0h-5A2.51,2.51,0,0,0,17,1.44L14.15.5A9.25,9.25,0,0,0,11.23,0H4.17A2.52,2.52,0,0,0,1.66,2.54a2.35,2.35,0,0,0,.19.91A2.51,2.51,0,0,0,.63,7.53,2.42,2.42,0,0,0,0,9.19a2.26,2.26,0,0,0,.63,1.67ZM4.18,10H2.51a.84.84,0,0,1-.84-.85.83.83,0,0,1,.84-.84H4.18a.85.85,0,0,0,0-1.7H2.51A.85.85,0,0,1,2.51,5H4.18a.85.85,0,0,0,0-1.7.85.85,0,1,1,0-1.69h7A7.81,7.81,0,0,1,13.56,2L16.73,3V13.37A6.65,6.65,0,0,0,13,15.81a12.16,12.16,0,0,0-2.45,4.71l-.28,1.19H10a1.67,1.67,0,0,1-1.66-1.66V19.2A13.73,13.73,0,0,1,9.16,15h1.73a.85.85,0,0,0,0-1.7H2.48a.85.85,0,0,1-.85-.85.84.84,0,0,1,.85-.84H4.14A.85.85,0,0,0,5,10.73.83.83,0,0,0,4.18,10Z"/>
<path id="bush1" d="M73.88,13.19a13.29,13.29,0,0,0-7.22,2.12A16.74,16.74,0,0,0,48,10.91,26.55,26.55,0,0,0,0,26.58H87.27A13.39,13.39,0,0,0,73.88,13.19Z" fill="#FFF"/>
<path id="bush2" d="M9.88,5.17a9.84,9.84,0,0,1,5.51,1.67A15,15,0,0,1,41.32,8.07,7.5,7.5,0,0,1,43,7.86,7.19,7.19,0,0,1,50.22,15H0A9.87,9.87,0,0,1,9.88,5.17Z" fill="#FFF"/>
<path id="bush3" d="M148.39,51.66C144.67-17.85,37.13-17.85,37.13,55.52v8.17C21.84,56.86,0,64.44,0,87.61V99.93c0,3.72,0,3.72,3.71,3.72H204.09c3.86,0,3.86,0,3.86-3.72V87.61c0-41.15-37.87-53.63-59.56-35.95Z" fill="#FFF"/>
<path id="loveHeart" d="M12.83,19.21l12-10.75a5.59,5.59,0,0,0-9.46-6L12.84,6.43,10.25,2.51a5.59,5.59,0,0,0-10.14,2,5.52,5.52,0,0,0,.69,4Z" />
<path class="footPath" id="footPath" d="M358.39,460c-.74,0,58.12-35.73,58.12-35.73,7.12-4.09,19,2.25,23,13.25,3.49,9.58,3,20-2.43,22.1-9.8,0-63.57.3-78.68.38" fill="none" stroke="#fff" stroke-miterlimit="10"/>
</defs>
<ellipse class="shadow" cx="410" cy="470" rx="88" ry="5" opacity="0.2"/>
<!-- <path class="footL" d="M365.52,466h-32a4.47,4.47,0,0,1-4.48-4.48v-7.46a4.48,4.48,0,0,1,5-4.45l32,3.91A4.48,4.48,0,0,1,370,458v3.55A4.47,4.47,0,0,1,365.52,466Z" fill="#fff"/> -->
<use class="bush bush1" xlink:href="#bush1" opacity="1" x="800" y="60"/>
<use class="bush bush1" xlink:href="#bush1" opacity="1" x="800" y="90"/>
<!-- <use class="bush1" xlink:href="#bush1" opacity="1" x="800" y="-122"/> -->
<!-- <use class="bush1" xlink:href="#bush1" opacity="1" x="800" y="-150"/> -->
<!-- <use class="bush2" xlink:href="#bush2" opacity="1" x="800" y="-140"/> -->
<use class="bush bush2" xlink:href="#bush2" opacity="1" x="800" y="120"/>
<use class="bush bush2" xlink:href="#bush2" opacity="1" x="800" y="40"/>
<!-- <use class="bush2" xlink:href="#bush2" opacity="1" x="800" y="-100"/> -->
<!-- <use class="bush3" xlink:href="#bush3" opacity="1" x="800" y="60"/>
<use class="bush3" xlink:href="#bush3" opacity="1" x="800" y="90"/> -->
<!-- <use class="bush3" xlink:href="#bush3" opacity="1" x="800" y="90"/> -->
<use xlink:href="#footPath" opacity="0"/>
<g class="foot footL">
<path d="M36.52,16.42h-32A4.47,4.47,0,0,1,0,11.94V4.48A4.48,4.48,0,0,1,5,0l32,3.91A4.48,4.48,0,0,1,41,8.39v3.55A4.47,4.47,0,0,1,36.52,16.42Z" fill="#fff"/>
<!-- <path d="M41,8.39v3.55a4.47,4.47,0,0,1-4.48,4.48h-32A4.46,4.46,0,0,1,.1,12.88a4.44,4.44,0,0,0,3.38,1.54h32A4.47,4.47,0,0,0,40,9.94V6.39a4.17,4.17,0,0,0-.1-.94A4.45,4.45,0,0,1,41,8.39Z" fill="#bdccd4"/> -->
</g>
<g class="foot footR">
<path d="M36.52,16.42h-32A4.47,4.47,0,0,1,0,11.94V4.48A4.48,4.48,0,0,1,5,0l32,3.91A4.48,4.48,0,0,1,41,8.39v3.55A4.47,4.47,0,0,1,36.52,16.42Z" fill="#fff"/>
<!-- <path d="M41,8.39v3.55a4.47,4.47,0,0,1-4.48,4.48h-32A4.46,4.46,0,0,1,.1,12.88a4.44,4.44,0,0,0,3.38,1.54h32A4.47,4.47,0,0,0,40,9.94V6.39a4.17,4.17,0,0,0-.1-.94A4.45,4.45,0,0,1,41,8.39Z" fill="#bdccd4"/> -->
</g>
<g class="heartGroup">
<use xlink:href="#loveHeart" opacity="1"/>
<use xlink:href="#loveHeart" opacity="1"/>
<use xlink:href="#loveHeart" opacity="1"/>
<use xlink:href="#loveHeart" opacity="1"/>
<use xlink:href="#loveHeart" opacity="1"/>
<!-- <use xlink:href="#dislike" opacity="1"/> -->
</g>
<g class="upperBody" transform="translate(10, 0)">
<g transform="translate(5, -20)" fill="#FFF">
<!-- <path class="torso" d="M411,335H353c0-24.6,19.95-117,44.55-117h0A13.45,13.45,0,0,1,411,231.45Z" fill="#fff"/> -->
<path class="torso" d="M407.47,262.21q.4-6.33,1.25-12.61a18,18,0,0,0-2.18-11.27,27.58,27.58,0,0,0-14.22-12.68h0a21.46,21.46,0,0,0-14.17.42c-9.7,3.69-17.49,14-23.12,30.77a143.06,143.06,0,0,0-6.22,44.52c0,13.26,2.4,31.32,11.67,42.17h0a25.4,25.4,0,0,0,8,6.35c2.83,1.67,15.53,7.89,35.17-1h0a37,37,0,0,0,11.91-8.13,10.88,10.88,0,0,0,1.58-12.34l-.46-.9a139.88,139.88,0,0,1-4.29-14.16c-.17-1-.35-2-.55-3a4.9,4.9,0,0,0-.61-1.41c-.36-1.69-3.43-21.94-3.76-23.68A172.92,172.92,0,0,1,407.47,262.21Z"/>
<g class="hand">
<circle cx="468.74" cy="285.01" r="20.82"/>
<rect x="460.77" y="265.14" width="39.15" height="12.54" rx="6.27" ry="6.27" transform="translate(-65.87 349.14) rotate(-37.57)"/>
</g>
<circle class="headBob" cx="420" cy="180" r=&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0