gsap+svg实现可拖动拉长脖子的企鹅动物效果代码-html代码-BFW代码库

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