TweenMax+DrawSVGPlugin+svg实现可爱熊猫睡觉打呼噜动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+DrawSVGPlugin+svg实现可爱熊猫睡觉打呼噜动画效果代码
代码标签： TweenMax DrawSVGPlugin svg 可爱 熊猫 睡觉 呼噜 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #66D3CD;
}
svg {
width: 100%;
visibility: hidden;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve">
<filter id="shadowBlur" x="0%" y="0%" width="275%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
<g id="shadow" opacity="0.4" filter="url(#shadowBlur)">
<ellipse fill="#54AEA7" cx="394.676" cy="343.597" rx="65" ry="8"/>
</g>
<g id="body">
<path id="frontPawR" fill="#303030" d="M369,338.5c0,3.59-6.716,6.5-15,6.5c-11,0-16-3.41-16-7s1-6,16-6C362.284,332,369,334.91,369,338.5z"/>
<path fill="#FFFFFF" d="M417.562,346l13.759-0.251c7.796-1.072,14.679-6.179,14.679-14.11v0c0-13.608-11.473-24.64-25.625-24.64H394v16.344C394,335.857,394,346,417.562,346z"/>
<path fill="#EBEBEB" d="M410.441,332.708c0,0,10.042,7.749,17.507,0.97c7.465-6.779,15.351-13.06,15.351-13.06l0.549,1.078
c1.604,3.148,2.363,6.659,2.202,10.189L446,333c0,0-3.22,7.407-9.409,11.173c-2.231,1.357-6.845,1.88-9.024,1.921
c-12.467,0.236-17.187-0.479-17.187-0.479l-3.517-7.829L410.441,332.708z"/>
<path fill="#303030" d="M445.981,332.269c0,0-0.629,1.396-1.693,2.21c-2.136,1.633-4.56,1.549-4.56,1.549l4.319,1.844
c0.776,0.646,1.953,0.095,1.953-0.915L445.981,332.269z"/>
<path id="backPaw" fill="#303030" d="M452,343c0,3-5.149,3-11.5,3c-5.268,0-8.23,0-9.823-0.512c-1.28-0.411-1.677-1.152-1.677-2.488c0-4,7-7,11.5-7C446.851,336,452,340.239,452,343z"/>
</g>
<g id="head">
<path fill="#303030" d="M343,316c0,7.732,5.791,14,8,14s0-6.268,0-14s-0.791-14-3-14S343,308.268,343,316z"/>
<path fill="#FFFFFF" d="M383.9,279.5h-4.3c-18.28,0-33.1,14.819-33.1,33.1v4.958c0,1.512,0.124,2.995,0.355,4.442h-0.14
c-3.882,0-4.939,2.615-4.819,6.698c0.217,7.382,1.104,16.802,32.615,16.802h9.589c18.17,0,32.9-14.73,32.9-32.9v0
C417,294.319,402.181,279.5,383.9,279.5z"/>
<path fill="#EBEBEB" d="M381.186,279.5h2.896c18.281,0,33.1,14.819,33.1,33.1v0c0,11.356-5.754,21.369-14.505,27.281
C402.677,339.881,411.009,298.46,381.186,279.5z"/>
<g id="snout">
<path fill="#231D1D" d="M348.974,328.117c-0.546,0.459-1.402,0.459-1.948,0l-1.603-1.348l0,0
c-0.928-0.781-0.305-2.167,0.974-2.167H348h1.603c1.279,0,1.902,1.386,0.974,2.167l0,0L348.974,328.117z"/>
<ellipse fill="#231D1D" cx="348.003" cy="325.855" rx="3.018" ry="1.717"/>
</g>
<path id="mouth" fill="none" stroke="#231D1D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M348,327v2.036c0,0,0,3.016,2.587,3.016c1.807,0,2.333-1.988,2.333-1.988"/>
<g id="ear">
<path fill="#231D1D" d="M416.259,314.576L416.259,314.576c6.679-6.187,7.078-16.616,0.891-23.295l-3.126-3.374
c-6.173-6.664-16.579-7.062-23.242-0.889l0,0c-3.892,3.605-4.124,9.683-0.519,13.575l12.475,13.467
C406.328,317.936,412.382,318.167,416.259,314.576z"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -95.1679 373.1731)" fill="#3E3E3E" cx="402.876" cy="301.464" rx="11.926" ry="18.708"/>
<path fill="#3E3E3E" d="M416.43,314.417L416.43,314.417c4.294-3.977,4.55-10.682,0.573-14.976l-11.127-12.012
c-3.963-4.278-10.645-4.534-14.923-0.571l-0.916,0.849c-3.48,3.224-3.688,8.659-0.464,12.14l13.006,14.04
C406.257,317.859,412.459,318.096,416.43,314.417z"/>
</g>
<g>
<path fill="#EBEBEB" d="M355.5,317.014c0.084,2.508,0.581,15.98,16.458,18.427c3.678,0.567,7.472,0.262,10.927-1.118
c0.766-0.306,1.53-0.667,2.234-1.091c5.302-3.195,4.881-13.9.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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