gsap+svg实现喂狗动画效果代码-html代码-BFW代码库

gsap+svg实现喂狗动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现喂狗动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html {
          --floor-color: #755b70;
        }
        
        body {
          margin: 0;
          padding: 0;
          height: 100vh;
          background-color: var(--floor-color);
        }
        
        svg {
          position: absolute;
          min-width: 100vw;
          max-height: 100vh;
          margin: 0 auto;
          top: 0;
        }
        
        .wallLeft {
          fill: #96668d;
        }
        
        .wallRight {
          fill: #a07f9a;
        }
        
        .wallBack {
          fill: #ddcada;
        }
        
        .shadow {
          fill: #2b2b2b;
        }
        
        .pet {
          cursor: pointer;
        }
    </style>



</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500">
  <g class="room">
    <path class="wallBack" fill="#e5e5e5" d="M46.14-146.86L31.96 317.6l529.31-7.89 29.08-466.21-544.21 9.64z"/>
    <path class="wallLeft" fill="#a5a5a5" d="M64.54 316.73l-.88-447.82-578.39 2.63 102.54 730L64.54 316.73z"/>
    <path class="wallRight" fill="#a5a5a5" d="M534.26 309.71l.88-453.07 493.39-4.38-52.59 772.94-441.68-315.49z"/>
  </g>
  <g class="sausage sausage1" opacity="0">
    <path class="shadow" fill="#6d6d6d" d="M116.41 390.3c-.63 8.39 16.84 7 29.75 6.21 14.51-.91 14.22-10.8.87-12.88-5.41-.84-12-1.35-17.44-.42-.91.16-12.99 4.6-13.18 7.09z" opacity=".6"/>
    <g class="contents">
      <g class="string" fill="none" stroke="#2d2d2d" stroke-miterlimit="10">
        <path class="stringLeft" d="M130.31-47.06c-.35 8.83-1.78 49.31-2.13 58.13-.84 21.6-1.69 43.23-4.35 64.68-1 7.72-2.14 15.53-1.07 23.23.6 4.25 1.87 8.37 2.51 12.61a102.62 102.62 0 01.75 12.77 369.23 369.23 0 003.1 37"/>
        <path class="stringRight" d="M132.67-47.95c.4 17.44-.28 66.52.13 84a56 56 0 001.27 12.73c1 3.92 2.86 7.57 4.51 11.28 5 11.29 8.27 23.46 8.57 35.81s-2.47 24.88-8.78 35.5c-2.66 4.47-6.05 8.68-10.63 11.14"/>
      </g>
      <g class="pieces">
        <path class="piece1" fill="#83a576" d="M120.37 58.57A37.91 37.91 0 00117.3 80c.44 2.91 1.58 6.2 4.36 7.18 2.43.85 5.22-.55 6.65-2.69a13.11 13.11 0 001.72-7.4 58.37 58.37 0 010-7.71c.25-2 .9-4 1.28-6 1.5-8.26-6.91-13.52-10.94-4.81z"/>
        <path class="piece2" fill="#408558" d="M118.58 90.88c-2 2.11-2.25 5.23-2.42 8.11-.31 5-.61 10.1.51 15 .78 3.41 2.69 7 6.08 7.85a6 6 0 006.71-3.53c.95-2.49.08-5.25-.25-7.9-.44-3.48.06-7 .12-10.5 0-2.83 0-7.69-2.36-9.77s-6.46-1.33-8.39.74z"/>
        <path class="piece3" fill="#83a576" d="M120.54 128c-1.77 2.82-2.08 6.3-2.1 9.63a65.14 65.14 0 00.65 9.47c.43 3.07 1.15 6.25 3.13 8.63s5.6 3.66 8.3 2.15c3-1.67 3.56-5.77 2.81-9.09s-2.49-6.39-2.91-9.76c-.47-3.73 1.89-10.47-.6.........完整代码请登录后点击上方下载按钮下载查看