奔跑的长颈鹿（Giraffe Cut-out GSAP runner）

最新推荐文章于 2024-08-08 17:26:57 发布

原创最新推荐文章于 2024-08-08 17:26:57 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#giraffe #runner #css #html

动物模型专栏收录该内容

28 篇文章

订阅专栏

本示例展示了一个使用HTML、CSS和JavaScript实现的奔跑长颈鹿动画效果，通过GSAP库控制各部位旋转达到行走动画的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

奔跑的长颈鹿（Giraffe Cut-out GSAP runner）

示例
HTML
CSS
JS

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 707 1000" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="2" dy="3" stdDeviation="2" flood-opacity="0.7" />
    </filter>
  </defs>
  <g id="giraffe">
    <g id="leg-fl">
      <path id="leg-fl-fill" d="M100.011 717.125l37.939 16.418 9.7 201.595 6.378 28.514-52.7 3.043-1.317-249.57z" fill="#ffe80b" filter="url(#shadow)" />
      <circle cx="123.762" cy="792.172" r="5.538" />
      <circle cx="113.169" cy="803.122" r="5.538" />
      <circle cx="116.186" cy="821.396" r="5.538" />
      <circle cx="120.549" cy="841.817" r="5.538" />
      <circle cx="131.079" cy="866.105" r="5.538" />
      <circle cx="113.012" cy="852.862" r="5.538" />
      <circle cx="134.656" cy="958.5" r="5.538" />
      <circle cx="116.806" cy="949.883" r="5.538" />
      <circle cx="136.785" cy="941.955" r="5.538" />
      <circle cx="113.815" cy="868.316" r="5.538" />
      <circle cx="122.829" cy="880.859" r="5.538" />
      <circle cx="112.08" cy="895.036" r="5.538" />
      <circle cx="123.69" cy="902.757" r="5.538" />
      <circle cx="110.809" cy="922.693" r="5.538" />
      <circle cx="134.409" cy="921.66" r="5.538" />
      <circle cx="123.796" cy="933.35" r="5.538" />
    </g>
    <g id="leg-bl">
      <path id="leg-bl-fill" d="M316.642 678.397l41.805-6.815 107.442 217.927-49.069 22.536-100.178-233.648z" fill="#ffe80f" filter="url(#shadow)" />
      <path d="M373.429 764.601l29.378 60.933 34.851 50.884" fill="none" stroke="#000" stroke-width="10.83" />
    </g>
    <g id="body">
      <path id="body-fill" fill="#ffe912" filter="url(#shadow)" d="M36.128 432.511h463.325v334.922H36.128z" />
      <circle cx="143.844" cy="605.631" r="5.538" />
      <circle cx="136.962" cy="637.764" r="5.538" />
      <circle cx="111.473" cy="608.166" r="5.538" />
      <circle cx="85.868" cy="643.044" r="5.538" />
      <circle cx="106.807" cy="673.931" r="5.538" />
      <circle cx="89.76" cy="593.941" r="5.538" />
      <circle cx="69.632" cy="597.465" r="5.538" />
      <circle cx="71.341" cy="698.02" r="5.538" />
      <circle cx="51.054" cy="657.851" r="5.538" />
      <circle cx="50.488" cy="741.247" r="5.538" />
      <circle cx="433.409" cy="460.809" r="5.538" />
      <circle cx="413.163" cy="496.933" r="5.538" />
      <circle cx="431.111" cy="511.58" r="5.538" />
      <circle cx="387.327" cy="475.345" r="5.538" />
      <circle cx="317.944" cy="489.539" r="5.538" />
      <circle cx="276.252" cy="484.825" r="5.538" />
      <circle cx="383.261" cy="525.834" r="5.538" />
      <circle cx="376.486" cy="545.15" r="5.538" />
      <circle cx="319.975" cy="549.369" r="5.538" />
      <circle cx="341.659" cy="569.143" r="5.538" />
      <circle cx="344.906" cy="585.776" r="5.538" />
      <circle cx="269.739" cy="561.364" r="5.538" />
      <circle cx="317.799" cy="618.262" r="5.538" />
      <circle cx="286.348" cy="611.862" r="5.538" />
      <circle cx="433.409" cy="460.809" r="5.538" />
      <circle cx="249.597" cy="603.153" r="5.538" />
      <circle cx="193.749" cy="609.37" r="5.538" />
      <circle cx="189.344" cy="655.302" r="5.538" />
    </g>
    <g id="neckHead">
      <g id="neck">
        <path id="neck-fill" d="M57.068 534.24l137.311 18.431 29.32-402.803-114.689-24.154L57.068 534.24z" fill="#ffe80f" filter="url(#shadow)" />
        <circle cx="118.165" cy="410.182" r="5.538" />
        <circle cx="152.494" cy="364.9" r="5.538" />
        <circle cx="131.55" cy="348.526" r="5.538" />
        <circle cx="170.156" cy="293.361" r="5.538" />
        <circle cx="136.962" cy="316.465" r="5.538" />
        <circle cx="135.407" cy="287.071" r="5.538" />
        <circle cx="153.377" cy="254.299" r="5.538" />
        <circle cx="146.545" cy="236.908" r="5.538" />
        <circle cx="136.962" cy="316.465" r="5.538" />
        <circle cx="175.951" cy="231.091" r="5.538" />
        <circle cx="137.296" cy="217.873" r="5.538" />
        <circle cx="116.789" cy="332.777" r="5.538" />
      </g>
      <g id="head">
        <path id="head-fill" d="M39.864 132.405l1.601-94.365 69.781-26.39 29.109-6.688 33.469 7.775 35.493 35.379 21.562 51.214-.238 64.101-190.777-31.026z" fill="#ffe80f" filter="url(#shadow)" />
        <circle cx="72.203" cy="95.714" r="5.538" />
        <circle cx="70.267" cy="68.46" r="5.538" />
        <circle cx="110.301" cy="45.587" r="5.538" />
        <circle cx="133.881" cy="42.628" r="5.538" />
        <path d="M106.629 68.628s23.059-1.273 27.408-3.461c4.349-2.188 9.707-2.597 14.769-11.19" fill="none" stroke="#000" stroke-width="11" />
      </g>
      <path d="M114.582 113.699l-8.746 62.016 109.549 15.451 8.747-62.016-109.55-15.451z" fill-opacity="0.5" fill="#ebebeb" />
    </g>
    <g id="tail">
      <path id="tail-fill" d="M387.317 594.002l184.475-46.07 105.661 111.152-26.439 29.229-98.413-88.407-183.767 47.688 18.483-53.592z" fill="#fee70d" filter="url(#shadow)" />
      <circle cx="645.982" cy="659.43" r="5.538" />
      <circle cx="619.526" cy="654.278" r="5.538" />
      <circle cx="632.421" cy="641.206" r="5.538" />
      <circle cx="615.36" cy="620.869" r="5.538" />
      <circle cx="586.577" cy="619.7" r="5.538" />
      <circle cx="607.347" cy="600.926" r="5.538" />
      <circle cx="588.579" cy="586.535" r="5.538" />
      <circle cx="572.751" cy="583.862" r="5.538" />
      <circle cx="564.705" cy="568.207" r="5.538" />
      <circle cx="554.182" cy="590.139" r="5.538" />
      <circle cx="546.794" cy="575.961" r="5.538" />
      <circle cx="528.889" cy="582.602" r="5.538" />
      <circle cx="518.175" cy="572.746" r="5.538" />
      <circle cx="507.352" cy="599.536" r="5.538" />
    </g>
    <g id="leg-br">
      <path id="leg-br-fill" d="M414.992 704.784l176.235 137.353-53.703 49.471-162.062-164.517 39.53-22.307z" fill="#ffe80c" filter="url(#shadow)" />
      <path d="M451.415 754.475l45.241 52.009 57.765 50.884" fill="none" stroke="#000" stroke-width="11" />
    </g>
    <g id="leg-fr">
      <path id="leg-fr-fill" d="M200.28 726.999l38.207 10.481L272.9 982.79l-56.254 11.155-17.462-193.292 1.096-73.654z" fill="#ffe80a" filter="url(#shadow)" />
      <path d="M217.043 769.521l11.371 119.722 19.963 83.477" fill="none" stroke="#000" stroke-width="10.83" />
    </g>
    <g id="tape" fill-opacity="0.5" fill="#ebebeb">
      <path d="M231.749 482.831l-62.173-7.548-13.334 109.827 62.173 7.548 13.334-109.827z" />
      <path d="M95.018 448.344l-62.585 2.348 4.149 110.556 62.585-2.348-4.149-110.556z" />

      <path d="M477.406 558.939l-62.147-7.76-13.708 109.781 62.147 7.761 13.708-109.782z" />
      <path d="M488.836 754.765l-1.973-62.598-110.579 3.484 1.973 62.598 110.579-3.484z" />
      <path d="M272.826 765.198l9.214-61.948-109.431-16.276-9.213 61.948 109.43 16.276z" />
    </g>
  </g>
</svg>

CSS

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(
    180deg,
    rgba(185, 238, 254, 0.5) 0%,
    rgba(185, 238, 254, 0.5) 68%,
    rgba(186, 212, 102, 0.5) 68%,
    rgba(186, 212, 102, 0.5) 100%
  );
}

svg {
  height: 100vh;
  width: 100vw;
}

JS

const duration = 0.6;

gsap.defaults({
  duration,
  transformOrigin: "center top",
  repeat: -1,
  yoyo: true,
  yoyoEase: true,
  ease: "power2.out"
});

const customEase = CustomEase.create(
  "custom",
  "M0,0 C0,0.724 0.2,1 0.5,1 0.8,1 1,0.56 1,0 "
);

gsap.to("#leg-fl", { rotation: 60 });

gsap.to("#leg-fr", {
  rotation: 60,
  delay: duration * 0.2
});

gsap.to("#leg-bl", {
  rotation: 30,
  delay: duration * 0.4
});

gsap.to("#leg-br", {
  rotation: 45,
  delay: duration * 0.6
});

gsap.to("#tail", {
  rotation: -15,
  delay: duration * 0.15,
  transformOrigin: "left center",
  yoyoEase: false,
  duration: duration * 2,
  ease: customEase
});

gsap.to("#giraffe", {
  translateY: -20,
  yoyoEase: false,
  duration: duration * 2,
  ease: customEase
});

gsap.to("#neckHead", {
  rotation: -10,
  delay: duration * 0.8,
  transformOrigin: "center bottom"
});

gsap.to("#head", {
  rotation: 10,
  transformOrigin: "center bottom",
  delay: duration * 0.8
});