gsap+svg实现可拖动拉长脖子的企鹅动物效果代码
代码语言：html
所属分类：拖放
代码描述：gsap+svg实现可拖动拉长脖子的企鹅动物效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #a2bedf;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 800px;
height: 600px;
visibility: hidden;
}
.penguinTop{
-webkit-tap-highlight-color:transparent;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g class="wholePenguin">
<g>
<ellipse cx="397" cy="512.59" rx="91.2" ry="23.4" fill="#96b0cd" />
<g class="penguinTop">
<g class="flipperGroup">
<path class="arm armR" d="M481.3,389.89c-.94-2.82-21-49.3-29.64-69.43l-4-9.17s-25.85-6-29.72,10.08c-1.47,6.12,31.82,62.22,36.13,69.81,7.19,12.68,19.95,39.15,21.79,41.91,2.4,3.6,4.8-1.2,5.4-3s2.07-16.22,2.4-19.2C484.3,405.49,482.5,393.49,481.3,389.89Z" fill="#252425" />
<path class="arm armL" d="M374.06,336a47.24,47.24,0,0,0-4.36,7.65c-1.2,3.6-16.8,38.4-18.6,42.6s-3.6,10.8-3.6,15c0,0-1.2,18-1.2,19.8s1.8,5.4,4.8,4.2c2.48-1,15.42-19.35,20.1-25.49,9.6-12.61,27-43.81,27-43.81l-18.3-28.5S376.85,331.76,374.06,336Z" fill="#252425" />
</g>
<g class="penguinHead">
<path d="M451,299c0,.51.06,2.79.17,6.4a14,14,0,0,1-5.27,2.9c-9.69,4.58-9.88,1.83-16.06,1.69-5.51-.12-6.12-3.23-8-5.8-.35-.49-1.85-8.55-3-9.41-1.73-1.3,1.22-5.08,2.42-8.68.74-2.21,3.05-3.74,4.73-4.59a15.12,15.12,0,0,1,1.87-.81s9-1.8,13.8,1.8a35.81,35.81,0,0,1,8.08,9.12h0A26.66,26.66,0,0,1,451,299Z" fill="#ffce80" />
<path d="M440.8,276.79a35.49,35.49,0,0,1,9,14.82,35.81,35.81,0,0,0-8.08-9.12c-4.8-3.6-13.8-1.8-13.8-1.8a15.12,15.12,0,0,0-1.87.81c1.73-1,2.47-4.41,1.87-8.61s-10.94-5.58-11.39-5.64C423.35,267.6,433.45,269.44,440.8,276.79Z" fill="#ff6949" />
<g class="face">
<path d="M427.9,272.89c.6,4.2-.14,7.62-1.87,8.61s-4,2.38-4.73,4.59c-1.2,3.6-.37,9.24-.46,10,0,0,.21,5.31-2.19,7.11s-15,13.47-19.38,1.24c2.3-2.77,2.83-7.24,2.83-11.18,0-4.2-3-12.6-6-16.2-2.5-3-16.09-6.64-20.51-7.76a.66.66,0,0,1-.18-1.2c2.67-1.62,5.53-1.89,8.39-2.14,3.3-.3,23.4,1.2,30,1.2.82,0,1.73,0,2.7.06h0C417,267.31,427.31,268.78,427.9,272.89Z" fill="#252425" />
<path d="M406.3,274.69a2.67,2.67,0,0,0-1.8-3.6c-1-.35-13.23-1-17.63-1.15a.23.23,0,0,0-.08.44c4,1.35,14.93,5,15.91,5.51A2.89,2.89,0,0,0,406.3,274.69Z" fill="#ffce80" />
<circle class="eye" cx="415.3" cy="276.49" r="1.2" fill="#fdfcfd" />
</g>
</g>
<path d="M455.8,390.79s-5.08-76.07-6-77.4l-3.9-5.1c.6-2.4,0-11.4-3-16.8s-13.58-1.28-17.4,0c-1.8.6-4.8,3-6.6,4.2-.74.49-4.2,3.6-6.6,5.4s-11.4,3.6-13,3.38c-.15.18-.3.35-.47.52,0,0-13.2,11.4-15.6,13.8-1.55,1.54-6.11,8.11-9.14,17.25A54.09,54.09,0,0,0,371.2,353v63h84.6Z" fill="#fdfcfd"/>
<path class="flank" d="M455.8,391.34c0-23.71-3.51-51.86-4.14-70.88-.2-6.14-.37-11.33-.49-15.07a14,14,0,0,1-5.27,2.9l-3.6,3c-2.4,2.4-4.8,6.6-4.8,19.2,0,7.08,1.3,36.76,1.8,61.8.18,8.9.14,17.2.11,23.7H455.8Z" fill="#252425" />
</g>
<g class="penguinBot">
<path d="M397.3,498.49c-3,1.51-6,3.6-7.2,4.2a8.53,8.53,0,0,1-3.6,1.2,19.07,19.07,0,0,1,1.8-5.4c-1.8,1.2-9.6,3-12.6,3,1.2-3,4.8-4.8,4.8-4.8-3,0-6.6.6-8.4,0a14.3,14.3,0,0,1,6.6-3.6c2.4-.6,6.55-.6,10.2-.6,4.2,0,12.9-.3,12,.6S399.7,497.29,397.3,498.49Z" fill="#272b2e" />
<path d="M429.1,495.49a10.76,10.76,0,0,0-3.6,6c1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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