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="#6f.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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