gsap实现小狗摇尾巴动画-html代码-BFW代码库

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=&quo.........完整代码请登录后点击上方下载按钮下载查看