svg+TweenMax实现小熊猫吃面动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+TweenMax实现小熊猫吃面动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="panda" viewBox="0 0 1004 727">
<g id="munchie">
<path fill="#ebf2de" d="M0 0h1003.66v726.084H0z"/>
<g id="panda">
<path id="chopstick-2" d="M394.845 255.723l22.873 47.19" fill="none" stroke="#393439" stroke-width="4"/>
<path id="chopstick-1" d="M414.264 259.129l3.454 43.784" fill="none" stroke="#393439" stroke-width="4"/>
<ellipse cx="455.499" cy="417.078" rx="113.746" ry="20.827" fill="#c8cfbe"/>
<use id="left-hand" xlink:href="#_Image1" x="398.881" y="295.518" width="67.812" height="86.508" transform="matrix(.99723 0 0 .99434 0 0)"/>
<ellipse cx="511.837" cy="370.176" rx="80.156" ry="64.421" fill="#fff" stroke="#393439" stroke-width="3" stroke-linecap="round"/>
<g id="head">
<g class="move ear" id="left-ear">
<ellipse cx="465.414" cy="223.312" rx="15.257" ry="14.952" fill="#585858" stroke="#393439" stroke-width="3" stroke-linecap="round"/>
<path d="M463.847 213.207c7.134-1.471 15.246 2.131 16.824 13.503 1.074 7.743-6.548 16.103-14.111 14.173-7.568-1.932-13.718-9.801-14.111-14.173-.699-7.788 3.759-11.928 11.398-13.503z" fill="#444248"/>
<path d="M466.45 217.469c6.812-1.358 14.558 1.967 16.064 12.463 1.026 7.145-6.252 14.861-13.473 13.08-7.227-1.783-13.099-9.046-13.474-13.08-.667-7.188 3.59-11.009 10.883-12.463z" fill="#393439"/>
</g>
<g class="move ear" id="right-ear">
<ellipse cx="563.66" cy="223.312" rx="15.257" ry="14.952" fill="#585858" stroke="#393439" stroke-width="3" stroke-linecap="round"/>
<path d="M565.226 213.207c-7.134-1.471-15.246 2.131-16.823 13.503-1.074 7.743 6.548 16.103 14.111 14.173 7.568-1.932 13.718-9.801 14.11-14.173.699-7.788-3.759-11.928-11.398-13.503z" fill="#444248"/>
<path d="M562.623 217.469c-6.812-1.358-14.557 1.967-16.063 12.463-1.026 7.145 6.252 14.861 13.473 13.08 7.226-1.783 13.099-9.046 13.473-13.08.668-7.188-3.589-11.009-10.883-12.463z" fill="#393439"/>
</g>
<use id="head1" serif:id="head" xlink:href="#_Image2" x="434.61" y="215.744" width="160.495" height="136.198" transform="matrix(.99686 0 0 .99415 0 0)"/>
<ellipse class="move" id="cheek-left" cx="471.699" cy="288.196" rx="8.972" ry="5.602" fill="#ffc1a8"/>
<ellipse class="move" id="cheek-right" cx="551.034" cy="289.128" rx="8.972" ry="5.602" fill="#ffc1a8"/>
<path id="munch" d="M527.666 280.251c-.992.143-.539 5.2 1.277 6.814 1.478 1.312 3.503 2.423 5.007 1.953" fill="none" stroke="#262626" stroke-width="3" stroke-linecap="round"/>
<g class="move" id="nose" fill="#333">
<path d="M523.197 273.802c-.196-.718-.691-1.552-1.247-1.529-.998.041-2.695.05-4.461.247-1.172.13-2.61-.215-3.85-.241-1.703-.037-3.244.5-4.75.364-1.781-.16-3.142-.332-3.853-.37-.555-.03-1.051.811-1.246 1.529-.207.765-.207 2.295 0 3.059.195.719.691 1.483 1.246 1.53 3.027.255 13.888.255 16.914 0 .555-.047 1.051-.811 1.247-1.53.207-.764.207-2.294 0-3.059z"/>
<path d="M513.736 274.155s-3.85 1.957-3.85 4.052a3.852 3.852 0 0 0 3.85 3.85 3.852 3.852 0 0 0 3.85-3.85c0-2.095-3.85-4.052-3.85-4.052z"/>
</g>
<path class="move" id="eye-right" d="M541.89 248.171c8.677 1.419 13.603 6.728 15.971 14.337 3.513 11.297-4.199 17.185-15.971 14.338-8.523-2.062-13.655-6.715-15.971-14.338-3.096-10.192 4.641-16.188 15.971-14.337z" fill="#424147" stroke="#333" stroke-width="2" stroke-linecap="round"/>
<path class="move" id="eye-left" d="M480.048 248.171c-8.678 1.419-13.604 6.728-15.971 14.337-3.514 11.297 4.199 17.185 15.971 14.338 8.523-2.062 13.655-6.715 15.971-14.338 3.096-10.192-4.641-16.188-15.971-14.337z" fill="#43414a" stroke="#333" stroke-width="2" stroke-linecap="round"/>
<path class="move" id="pupil-left" d="M480.239 259.265c3.368.604 5.664 3.537 5.125 6.546-.54 3.008-1.459-2.196-4.827-2.8-3.368-.604-7.917 3.62-7.377.611.539-3.008 3.712-4.961 7.079-4.357z" fill="#f6f6f7"/>
<path class="move" id="pupil-right" d="M541.507 258.762c-3.314.595-5.573 3.481-5.042 6.441.531 2.96 1.436-2.161 4.75-2.755 3.314-.594 7.79 3.562 7.259.601-.531-2.96-3.653-4.881-6.967-4.287z" fill="#f6f6f7"/>
<g class="move" id="mouth">
<g id="group" fill="none" stroke="#262626" stroke-width="3" stroke-linecap="round">
<path d="M513.81 285.353c-.668 1.613 3.706 6.241 7.362 6.026 2.682-.158 6.335-2.447 7.08-5.186"/>
<path d="M499.314 285.353c-.667 1.613 4.389 6.274 8.104 6.015 2.68-.186 5.593-2.436 6.338-5.175"/>
</g>
<ellipse cx="513.975" cy="290.58" rx="2.139" ry="2.211" fill="#262626"/>
</g>
</g>
<path class="noodle" id="long-noodle2" fill="#ceb751" stroke="#262626" stroke-width="4" stroke-linecap="round" d="M506.088 292.791h6.863v76.881h-6.863z"/>
<path class="noodle" id="long-noodle1" fill="#ceb751" stroke="#262626" stroke-width="4" stroke-linecap="round" d="M514.555 292.791h6.863v76.881h-6.863z"/>
<ellipse id="noodle1" cx="466.985" cy="372.104" rx="19.47" ry="14.657" fill="#d7bd69&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