gsap+svg实现喂狗动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现喂狗动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
--floor-color: #755b70;
}
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: var(--floor-color);
}
svg {
position: absolute;
min-width: 100vw;
max-height: 100vh;
margin: 0 auto;
top: 0;
}
.wallLeft {
fill: #96668d;
}
.wallRight {
fill: #a07f9a;
}
.wallBack {
fill: #ddcada;
}
.shadow {
fill: #2b2b2b;
}
.pet {
cursor: pointer;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500">
<g class="room">
<path class="wallBack" fill="#e5e5e5" d="M46.14-146.86L31.96 317.6l529.31-7.89 29.08-466.21-544.21 9.64z"/>
<path class="wallLeft" fill="#a5a5a5" d="M64.54 316.73l-.88-447.82-578.39 2.63 102.54 730L64.54 316.73z"/>
<path class="wallRight" fill="#a5a5a5" d="M534.26 309.71l.88-453.07 493.39-4.38-52.59 772.94-441.68-315.49z"/>
</g>
<g class="sausage sausage1" opacity="0">
<path class="shadow" fill="#6d6d6d" d="M116.41 390.3c-.63 8.39 16.84 7 29.75 6.21 14.51-.91 14.22-10.8.87-12.88-5.41-.84-12-1.35-17.44-.42-.91.16-12.99 4.6-13.18 7.09z" opacity=".6"/>
<g class="contents">
<g class="string" fill="none" stroke="#2d2d2d" stroke-miterlimit="10">
<path class="stringLeft" d="M130.31-47.06c-.35 8.83-1.78 49.31-2.13 58.13-.84 21.6-1.69 43.23-4.35 64.68-1 7.72-2.14 15.53-1.07 23.23.6 4.25 1.87 8.37 2.51 12.61a102.62 102.62 0 01.75 12.77 369.23 369.23 0 003.1 37"/>
<path class="stringRight" d="M132.67-47.95c.4 17.44-.28 66.52.13 84a56 56 0 001.27 12.73c1 3.92 2.86 7.57 4.51 11.28 5 11.29 8.27 23.46 8.57 35.81s-2.47 24.88-8.78 35.5c-2.66 4.47-6.05 8.68-10.63 11.14"/>
</g>
<g class="pieces">
<path class="piece1" fill="#83a576" d="M120.37 58.57A37.91 37.91 0 00117.3 80c.44 2.91 1.58 6.2 4.36 7.18 2.43.85 5.22-.55 6.65-2.69a13.11 13.11 0 001.72-7.4 58.37 58.37 0 010-7.71c.25-2 .9-4 1.28-6 1.5-8.26-6.91-13.52-10.94-4.81z"/>
<path class="piece2" fill="#408558" d="M118.58 90.88c-2 2.11-2.25 5.23-2.42 8.11-.31 5-.61 10.1.51 15 .78 3.41 2.69 7 6.08 7.85a6 6 0 006.71-3.53c.95-2.49.08-5.25-.25-7.9-.44-3.48.06-7 .12-10.5 0-2.83 0-7.69-2.36-9.77s-6.46-1.33-8.39.74z"/>
<path class="piece3" fill="#83a576" d="M120.54 128c-1.77 2.82-2.08 6.3-2.1 9.63a65.14 65.14 0 00.65 9.47c.43 3.07 1.15 6.25 3.13 8.63s5.6 3.66 8.3 2.15c3-1.67 3.56-5.77 2.81-9.09s-2.49-6.39-2.91-9.76c-.47-3.73 1.89-10.47-.6-13.66s-7.58-.05-9.28 2.63z"/>
<path class="piece4" fill="#408558" d="M133.93 51a3.36 3.36 0 00-2.12 2.5 4.23 4.23 0 00.24 1.44l5.18 18a14 14 0 001.77 4.33 4.81 4.81 0 003.9 2.24c1.81-.06 3.3-1.49 4.19-3.06a14.59 14.59 0 001.67-6.25c.47-7.03-4.76-24.04-14.83-19.2z"/>
<path class="piece5" fill="#83a576" d="M149.45 81.85a7.1 7.1 0 00-4.55-1.59 5.93 5.93 0 00-2.79.58c-2.05 1-3 3.5-3.08 5.79s.53 4.56.76 6.84c.43 4.37-.53 8.77-.32 13.15a6.8 6.8 0 00.63 2.93c1.08 2 5.75 2.86 7.91 2.11a7.33 7.33 0 004.38-4.09c2.15-4.27.57-9.88 0-14.51-.45-3.13-.39-9.06-2.94-11.21z"/>
<path class="piece6" fill="#408558" d="M138.77 114.7a11.43 11.43 0 00-2.65 3.39l-7.53 12.57a12.92 12.92 0 00-2 4.58 6.49 6.49 0 002.41 6 5.11 5.11 0 002.17 1c2.52.48 4.88-1.29 6.66-3.14 4.7-4.91 7.12-10.6 9.13-17 .79-2.47 1.71-4.08-.09-6.38a5.86 5.86 0 00-8.1-1.02z"/>
</g>
</g>
</g>
<g class="sausage sausage2" opacity="0">
<path class="shadow" fill="#6d6d6d" d="M240.21 383.29a23.4 23.4 0 00-15.49.58c-1.95.77-4.11 2.54-3.43 4.52a4.16 4.16 0 001.76 1.91 19 19 0 0018.51 1.17c1.68-.83 3.41-2.26 3.3-4.12-.14-2.48-3.19-3.51-5.65-3.91" opacity=".6"/>
<g class="contents">
<g class="ends" fill="#c2703c">
<path class="top" d="M238.47 29.3a70.79 70.79 0 01-1-7.94 3.39 3.39 0 011.79 1c-.29-.57.7-1 1.29-.73s1.23.74 1.81.46 1.13-1.4 1.66-.94l.44 1.12a3 3 0 011.43-.36 1.05 1.05 0 011 .91 1.57 1.57 0 01-.39.87l-3.17 4.35a3 3 0 01-1.23 1.15c-1.06.41-2.29-.44-3.36-.08"/>
<path class="bottom" d="M234.44 146.05a14.73 14.73 0 01-2.94 4.95 1.14 1.14 0 00-.27.39.75.75 0 00.62.88A1.82 1.82 0 00233 152a1.68 1.68 0 011-.27c.52.1.77.67 1.15 1s1.24.32 1.19-.2a2.43 2.43 0 001.2.81c.49.1 1.08-.22 1.08-.71a4.73 4.73 0 003.15-.1c.25-.1.53-.27.54-.54a.78.78 0 00-.19-.47l-2.54-3.67a3.69 3.69 0 00-.85-.95 4.46 4.46 0 00-2.47-.42c-.85 0-1.84-.31-2.12-1.11"/>
</g>
<path class="string" f.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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