gsap实现小狗摇尾巴动画
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
}
svg {
position: absolute;
min-width: 100vw;
max-height: 100vh;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
footer {
position: fixed;
bottom: 0;
background: black;
width: 100%;
font-family: sans-serif;
padding: 5px;
text-align: center;
}
footer a {
color: white;
}
</style>
</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 801 801">
<g fill-rule="nonzero">
<g id="tail">
<path id="main-tail" fill="#6f3c17" d="M496.52 647.46s49.5-2.13 64-98.2c0 0 4.09 105.35-68.5 124.74l4.5-26.54z" />
</g>
<g id="body">
<path fill="#fdcfa5" d="M474.23 544.28s26.79 35.39 24.04 101.05C495.52 711 428.02 705 400.02 702.5s-82.17-4-89.34-6.5c-7.16-2.5-16.16-14.5-17.66-14.25s-11.97-12.25-15-27.75c-3.04-15.5.52-56.3 5-62.18 4.47-5.88 13.74-48.32 25.12-58.82s36.38-9 39.38-8.75 109.73 8.25 111.36 8.75c1.64.5 15.35 11.28 15.35 11.28z" />
<path fill="#6f3c17" d="M471.02 535.63l-2.1.7c7.73 10.29 29.42 44.57 25.57 108.86a76.6 76.6 0 01-.44 4.87c-8.66 69.8-108.81 52.98-108.81 52.98s-95.54 8.45-101.34-48.83c-7.14-70.38 19.71-114.99 27.57-126.35l-3.68-.12s-40.4 49.09-31.54 134.81c6.17 59.76 107.72 50.95 107.72 50.95s111.33 18.34 116.14-60.36c4.87-79.8-29.1-117.51-29.1-117.51z" />
</g>
<g id="legs">
<path fill="#fdcfa5" d="M448.68 561.33s-17.33 56.67-16.33 95l1.99 3.26s13.3-.26 17.65 3.74c4.36 4 10.86 13 11.78 29 .91 16 0 17.34 0 17.34s-27.09 7.25-42.42 6.95c-15.33-.29-33.57-7.29-33.57-7.29l-.01-7.66s-.4 9.82-6.27 12c-5.87 2.16-32.48 4.93-43.48 2.96-11-1.96-27.34-7.3-27.34-7.3V688l3.67-14 8.35-11.67 19.01-2.56-2.7-36.44s-4.66-43.33-11.33-55.66c-6.66-12.34 13-.32 14.34-1.33 1.33-1 40 1.33 41.66 1.33 1.67 0 49.67-3 49.67-3l15.33-3.34z" />
<g id="Legs1" fill="#6f3c17">
<path d="M366.02 663.67s-23.67-6.67-40.67 0c0 0-17.67 12-11.33 44.66 0 0 43.66 16.34 70.66 0l3.09-91.33-.42 97.17s-35.33 18.08-80.18-1.4c0 0-5.74-38.52 15.43-52.52 0 0 23.2-5.97 43.42 3.42z" />
<path d="M327.68 567.67s11.34 39.74 11.09 91.7l6.56.88s-2.81-59.25-17.65-92.58zM327.68 678.5s-8.58 9.75-9.95 33.08l5.79 1.92s-.92-25 4.16-35zM357.02 716.63s-1.38-17.38 2-34.88c0 0-7.38 18.25-6.88 34.88h4.88zM408.68 663.67s23.67-6.67 40.67 0c0 0 17.67 12 11.33 44.66 0 0-43.66 16.34-70.66 0L387.77 617l-.76 97.35s35.57 18.06 80.42-.85c0 0 5.84-39.25-15.33-53.25 0 0-23.2-5.97-43.42 3.42z" />
<path d="M447.02 567.67s-11.34 39.74-11.09 91.7l-6.56.88s2.81-59.25 17.65-92.58zM447.02 678.5s8.58 9.75 9.95 33.08l-5.79 1.92s.92-25-4.16-35zM417.68 716.63s1.38-17.38-2-34.88c0 0 7.38 18.25 6.88 34.88h-4.88z" />
</g>
</g>
<g id="head">
<g id="tongue">
<path fill="#be202e" d="M467.43 544.67s11.18 15.25 24.59 16.66c13.4 1.42 28.51 5.21 38.31-4.93s13.69-19.9 7.02-32.15S522.39 503 522.88 502c.5-1-2.53-3.33-2.53-3.33s-18.86 25.4-19.76 26.03c-.9.63-29.24 16.63-29.24 16.63l-3.92 3.34z" />
<path fill="#6f3c17" d="M501.27 524.25s9.25 10 11.5 14c0 0-12-11.25-14.5-12l3-2z" />
<path fill="#6f3c17" d="M470.27 542.25s24.86 31.07 55.28 15.97c33.25-16.5-6.03-56.22-6.03-56.22l3-6s45.14 46.34 5.75 67.21c0 0-36.25 16.67-64.5-18.96l6.5-2z" />
</g>
<g id="ears">
<path fill="#a97c50" d="M528.93 464.42s7.47-41.89-16.89-86.15c0 0-26.64-77.3-28.42-118.27 0 0 1.62-26.46-4.84-33.87 0 0 21.57-7.66 33.26 8.3 11.7 15.96 21.36 75.44 46.98 92.24 25.62 16.8 76.45 60.1 76.67 79.1.21 19-8.89 72.62-57.34 68.23 0 0-32.84.83-49.42-9.58zM268.37 464.42s-7.48-41.89 16.88-86.15c0 0 26.65-77.3 28.43-118.27 0 0-1.63-26.46 4.83-33.87 0 0-21.57-7.66-33.26 8.3-11.69 15.96-21.35 75.44-46.97 92.24-25.62 16.8-76.26 60.1-76.67 79.1-.6 27.53 8.88 72.62 57.34 68.23 0 0 32.84.83 49.42-9.58z" />
<path fill="#6f3c17" d="M321.18 224.15s-11.5-12.82-30.16-4.15c-18.5 8.6-24 60-49 95s-94.37 51.66-81.5 116c13 65 96 49.72 105 38.61l3-16.11s-30.5 24.33-74.5 10.91c-44-13.41-30.78-71.25-11.16-87.75 21.66-18.2 67.67-49.13 81.08-84.66 13.1-34.68 23.08-79 54.08-61l3.16-6.86zM474.23 224.15s11.5-12.82 30.17-4.15c18.5 8.6 18.85 50.6 43.85 85.6 25 35 99.51 61.05 86.65 125.4-13 65-96 49.72-105 38.61l-3-16.11s30.5 24.33 74.5 10.91c44-13.41 30.78-71.25 11.15-87.75-21.66-18.2-66.14-49.75-81.08-84.66-14.12-33-23.07-79-54.07-61l-3.17-6.86z" />
</g>
<path fill="#fdcfa5" d="M400.02 200s66.42-2 77.38 31c0 0 5.71 3.6 6.05 12.3.35 8.7 8.53 67.5 12.15 80.64 3.63 13.14 12.08 46.73 24.75 75.4 12.67 28.66 11 60.66 7.33 77.66-3.66 17-21.33 62.67-87 73.67-65.66 11-92.33 4-102.66-3-10.34-7-46.34-23.67-54.34-40.67s-15.87-44.14-16.12-50.08c-.25-5.94-2.85-31.92 5.99-50.76 8.83-18.84 23.45-55.64 23.64-61.16.19-5.52 10.5-50 10.66-58 .17-8 5.52-43.67 6.56-48.94 1.05-5.27 11.27-28.06 39.27-34.4 28-6.33 46.34-3.66 46.34-3.66z" />
<path fill="#e7e7e8&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