小狗在家app页面动态效果（Vue2）

效果图（动态）：

演示视频

Vue2代码： 

<template>
  <div>
    <van-nav-bar title="宠添心">
      <template #left>
        <van-icon name="location" size="20" />
        <span class="title">dog</span>
      </template>
      <template #right>
        <van-icon name="fire" size="20" />
      </template>
    </van-nav-bar>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 1024 1024"
      height="320"
      width="320"
      style="position: absolute; top: 8.5em; left: -4em"
    >
      <path
        fill="url(#paint0_linear_1536_113002)"
        d="M483.206 295.608L423.252 284.361L412.005 344.316L471.959 355.563L483.206 295.608Z"
      ></path>
      <path
        fill="url(#paint1_linear_1536_113002)"
        d="M458.019 313.267C490.859 319.428 523.26 293.619 530.388 255.622C537.516 217.625 516.672 181.828 483.832 175.668C450.992 169.507 418.591 195.315 411.463 233.313C404.335 271.31 425.179 307.107 458.019 313.267Z"
      ></path>
      <path
        fill="url(#paint2_linear_1536_113002)"
        d="M421.078 121.791C432.166 123.871 440.699 131.806 444.171 141.872C465.34 138.752 492.872 142.189 519.191 168.063C523.001 172.474 526.291 177.078 528.787 181.867C543.064 203.714 536.175 234.526 532.705 237.082C531.179 238.206 527.789 237.665 522.693 236.851C512.752 235.262 496.322 232.637 474.573 239.318C471.539 240.656 468.791 242.095 466.428 243.738C466.106 243.26 465.73 242.651 465.299 241.955C461.199 235.325 452.168 220.724 437.91 233.986C425.545 253.68 441.27 269.27 449.569 268.278C445.14 276.55 437.444 284.114 422.553 292.743C407.537 289.927 401.613 288.815 385.275 272.542C372.042 254.15 359.21 209.96 391.091 171.047C386.052 164.339 383.741 155.558 385.424 146.587C388.575 129.79 404.538 118.688 421.078 121.791Z"
        clip-rule="evenodd"
        fill-rule="evenodd"
      ></path>
      <path
        fill="url(#paint3_linear_1536_113002)"
        d="M262 402C262 399.239 264.239 397 267 397H286C288.761 397 291 399.239 291 402V634H457C459.761 634 462 636.239 462 639V653C462 653.342 461.966 653.677 461.9 654C461.966 654.323 462 654.658 462 655V817C462 819.761 459.761 822 457 822H438C435.239 822 433 819.761 433 817V658H267C264.239 658 262 655.761 262 653V639C262 638.658 262.034 638.323 262.1 638C262.034 637.677 262 637.342 262 637V402Z"
        clip-rule="evenodd"
        fill-rule="evenodd"
      ></path>
      <rect
        fill="#FEE4C3"
        transform="rotate(27.9239 478.893 741)"
        height="34.0879"
        width="25.5659"
        y="741"
        x="478.893"
      ></rect>
      <path
        fill="#4F538F"
        d="M493.966 825.171C484.788 832.486 475.119 821.982 463.361 807.23C451.603 792.477 439.036 776.712 446.345 765.426C446.032 765.926 450.331 756.789 468.285 758.858C468.285 758.858 469.621 774.172 486.914 782.23C494.749 797.294 500.802 819.722 493.966 825.171Z"
      ></path>
      <rect
        fill="#FEE4C3"
        transform="rotate(-12.0042 674.6 759.317)"
        height="34.0879"
        width="25.5659"
        y="759.317"
        x="674.6"
      ></rect>
      <path
        fill="#4F538F"
        d="M749.228 781.817C753.637 792.726 740.842 798.993 723.387 806.047C705.932 813.101 687.278 820.639 678.538 810.384C678.928 810.828 671.394 804.079 678.457 787.438C678.457 787.438 693.5 790.55 706.11 776.263C722.754 773.065 745.944 773.691 749.228 781.817Z"
      ></path>
      <path
        fill="#C7DCFF"
        d="M619.755 532.696C602 523.5 461.638 526.58 392.178 530.303C375.38 547.056 552.962 593.725 547.763 594.124C543.603 594.443 493.679 693.648 463.016 748.96C463.016 748.96 476.5 754.5 502.5 763.5C526.443 748.96 645.753 602.501 646.953 580.163C648.153 557.826 640.628 543.506 619.755 532.696Z"
      ></path>
      <path
        fill="#D0E2FF"
        d="M320.058 611C302 587.5 302.207 555.175 313.386 524C334.947 537.189 360.536 530 409.057 530C423.904 530 506.057 524 621.63 566.366C667.057 583.018 698.291 691.198 717.058 762.207C711.468 764.339 673.536 771 673.536 771C673.536 771 631.321 692.582 610.45 669.882C582.057 639 583.517 627 506.057 627C352.001 657 325.8 618.472 320.058 611Z"
      ></path>
      <path
        fill="url(#paint4_linear_1536_113002)"
        d="M564.916 301.823C572.069 297.613 570.643 305.473 570.643 311.845C569.5 318.5 575.5 317.5 575.5 317.5C575.5 315.245 578.379 301.917 581.371 298.549C583.68 295.95 584.363 293.403 592.342 292C608.967 292 601.796 339.379 588.384 347.272C574.972 355.166 558.25 333.75 557.438 328.487C556.625 323.225 555.975 307.086 564.916 301.823Z"
      ></path>
      <path
        fill="url(#paint5_linear_1536_113002)"
        d="M440.555 359.5C435.822 330.894 447.557 347.056 465 336C478.392 317.731 509.5 349 526 380C540.77 399.384 547.993 312.081 567.587 314.033C580.618 320.704 597.296 332.407 597.296 332.407C597.296 332.407 578.724 476.407 522.509 456.944C466.293 437.48 445.577 389.854 440.555 359.5Z"
      ></path>
      <path
        fill="url(#paint6_linear_1536_113002)"
        d="M477.377 326.326C448.86 348.75 426.879 325.532 419.453 311.12C418.055 310.858 403.119 313.89 386.674 327.474C360.988 348.693 314.149 445.039 312 527C375.254 544.652 497.065 545.028 493.501 527C489.046 504.466 512.496 463.104 516.167 420.396C517.628 403.398 508.567 345.196 477.377 326.326Z"
      ></path>
      <path
        fill="#5B7EFB"
        d="M484.521 331.984C484.521 331.984 481.089 327.078 476.885 326.29C450.076 344.22 427.315 323.995 418.794 311.132C418.478 310.633 414.591 310.341 409.614 313.669C440.434 353.548 472.394 342.495 484.521 331.984Z"
      ></path>
      <rect
        fill="url(#paint7_linear_1536_113002)"
        transform="rotate(10.1553 573.727 270)"
        rx="3"
        height="83.5179"
        width="11"
        y="270"
        x="573.727"
      ></rect>
      <path
        fill="url(#paint8_linear_1536_113002)"
        d="M559.916 312.823C567.069 308.613 565.643 316.473 565.643 322.845C564.5 329.5 570.5 328.5 570.5 328.5C570.5 326.245 573.379 312.917 576.371 309.549C578.68 306.95 579.363 304.403 587.342 303C603.967 303 596.796 350.379 583.384 358.272C569.972 366.166 553.25 344.75 552.438 339.487C551.625 334.225 550.975 318.086 559.916 312.823Z"
      ></path>
      <path
        fill="url(#paint9_linear_1536_113002)"
        d="M385.499 386.5C378.499 361.5 385.739 345.953 404.906 336.499C444.496 339.462 461.937 368.021 497.5 405.5C510.506 426.072 533.5 360.5 552.517 334.339C565.162 342.119 590.379 349.311 590.379 349.311C590.379 349.311 547.393 484.998 489.485 469.435C439.5 456 393.806 416.165 385.499 386.5Z"
      ></path>
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="349.939"
          x2="441.982"
          y1="297.734"
          x1="451.775"
          id="paint0_linear_1536_113002"
        >
          <stop stop-color="#FFCDA5"></stop>
          <stop stop-color="#FFE8D1" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="316.837"
          x2="520.038"
          y1="173.953"
          x1="474.692"
          id="paint1_linear_1536_113002"
        >
          <stop stop-color="#FFF2DF"></stop>
          <stop stop-color="#FEE0BC" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="256.014"
          x2="375.582"
          y1="190.663"
          x1="512.076"
          id="paint2_linear_1536_113002"
        >
          <stop stop-color="#9F4326"></stop>
          <stop stop-color="#574915" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="575.178"
          x2="148.587"
          y1="421.166"
          x1="425.085"
          id="paint3_linear_1536_113002"
        >
          <stop stop-color="white"></stop>
          <stop stop-color="#B8B8B8" offset="0.037028"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="311.618"
          x2="615.902"
          y1="324.277"
          x1="567.409"
          id="paint4_linear_1536_113002"
        >
          <stop stop-color="#FFD5B1"></stop>
          <stop stop-color="#FEE3C1" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="529.058"
          x2="525.244"
          y1="319.537"
          x1="502.87"
          id="paint5_linear_1536_113002"
        >
          <stop stop-color="#D191FF"></stop>
          <stop stop-color="#8E94FF" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="587.591"
          x2="319.923"
          y1="305.634"
          x1="529.01"
          id="paint6_linear_1536_113002"
        >
          <stop stop-color="#F094FF"></stop>
          <stop stop-color="#6688FF" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="278.987"
          x2="561.646"
          y1="274.267"
          x1="581.653"
          id="paint7_linear_1536_113002"
        >
          <stop stop-color="#6CB8FF"></stop>
          <stop stop-color="#8FC8FF" offset="0.338839"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="322.618"
          x2="610.902"
          y1="335.277"
          x1="562.409"
          id="paint8_linear_1536_113002"
        >
          <stop stop-color="#FFD5B1"></stop>
          <stop stop-color="#FEE3C1" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="541.97"
          x2="498.141"
          y1="331.781"
          x1="494.5"
          id="paint9_linear_1536_113002"
        >
          <stop stop-color="#D191FF"></stop>
          <stop stop-color="#8E94FF" offset="1"></stop>
        </linearGradient>
      </defs>
    </svg>

    <div class="dog">
      <!-- 头 -->
      <div class="dog__head">
        <!-- 嘴巴部分 -->
        <div class="dog__snout">
          <!-- 鼻梁 -->
          <div class="dog__nose"></div>
          <!-- 眼睛 -->
          <div class="dog__eyes">
            <div class="dog__eye-l"></div>
            <div class="dog__eye-r"></div>
          </div>
        </div>
      </div>
      <!-- 耳朵 -->
      <div class="dog__head-c">
        <div class="dog__ear-l"></div>
        <div class="dog__ear-r"></div>
      </div>
      <!-- 身体 -->
      <div class="dog__body">
        <!-- 尾巴 -->
        <div class="dog__tail"></div>
      </div>
      <!-- 三只角 -->
      <div class="dog__paws">
        <div class="dog__bl-leg leg">
          <div class="dog__bl-paw paw"></div>
          <div class="dog__bl-top top"></div>
        </div>
        <div class="dog__fl-leg leg">
          <div class="dog__fl-paw paw"></div>
          <div class="dog__fl-top top"></div>
        </div>
        <div class="dog__fr-leg leg">
          <div class="dog__fr-paw paw"></div>
          <div class="dog__fr-top top"></div>
        </div>
      </div>
    </div>
    <div class="dogs">
      <div class="dogs-body">
        <div class="dogs-tail">
          <div class="dogs-tail">
            <div class="dogs-tail">
              <div class="dogs-tail">
                <div class="dogs-tail">
                  <div class="dogs-tail">
                    <div class="dogs-tail">
                      <div class="dogs-tail"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dogs-torso"></div>
      <div class="dogs-head">
        <div class="dogs-ears">
          <div class="dogs-ear"></div>
          <div class="dog-ear"></div>
        </div>
        <div class="dogs-eyes">
          <div class="dogs-eye"></div>
          <div class="dogs-eye"></div>
        </div>
        <div class="dogs-muzzle">
          <div class="dogs-tongue"></div>
        </div>
      </div>
    </div>
    <div class="ball" tabindex="0"></div>
    <div class="box-canvas">
      <div class="dog1">
        <div class="heart1"></div>
        <div class="body1"></div>
        <div class="nose1"></div>
        <div class="ear1"></div>
        <div class="eye1"></div>
        <div class="tail1"></div>
      </div>
      <div class="slide">
        <div class="slide-end"></div>
        <div class="slide-main"></div>
        <div class="slide-start"></div>
      </div>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="send-gift-o">铃铛宠物</van-tabbar-item>
      <van-tabbar-item icon="gem-o">遛遛狗</van-tabbar-item>
      <van-tabbar-item icon="shop-collect">小狗窝</van-tabbar-item>
      <van-tabbar-item icon="flower-o">人人宠</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<script>
export default {
  name: "HomeView",
  data() {
    return {
      active: 2,
    };
  },
};
</script>
<style>
html,
body {
  background: #50cab2;
  margin: 0;
  padding: 0;
  background-image: url("https://hbimg.huabanimg.com/16c5bf0bf829f5ed71f8342679fe54003d826b6714528-ZXtjcK_fw658");
  background-size: 100%;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}
:root {
  --dog-color: white;
  --dog-accent-color: #333642;
  --background-color: #25a9fc;
  --slide-color: #fedf01;
  --ladder-color: #0185b5;
  --heart-color: #e81c23;
}
.title {
  margin-left: 5px;
  color: rgb(25, 137, 250);
}
.dog {
  position: relative;
  top: 18em;
  left: 12em;
  width: 22.5vmax;
  height: 8.25vmax;
}

.dog__head {
  position: absolute;
  left: 1.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
  background-color: #ff8147;
  z-index: 4;
}

.dog__head-c {
  position: absolute;
  left: 1.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
}
.dog__eye-l {
  left: 27%;
}

.dog__eye-r {
  left: 65%;
}

.dog__ear-l,
.dog__ear-r {
  position: absolute;
  width: 10.5vmax;
  height: 3.375vmax;
  background-color: #e26538;
}

.dog__ear-l {
  top: 1.5vmax;
  left: 6vmax;
  transform-origin: bottom left;
  transform: rotateZ(-50deg);
}

.dog__ear-r {
  top: 1.5vmax;
  right: 3vmax;
  transform-origin: bottom right;
  transform: rotateZ(20deg);
}

.dog__body {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  bottom: 0.3vmax;
  left: 3.75vmax;
  width: 18.75vmax;
  height: 7.2vmax;
  background-color: #ff702e;
}
.dog__ear-l,
.dog__ear-r {
  border-top-left-radius: 0vmax;
  border-top-right-radius: 0vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
}
/* 狗狗头圆角 */
.dog__head {
  border-top-left-radius: 4.05vmax;
  border-top-right-radius: 4.05vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
}
/* 狗狗身体圆角 */
.dog__body {
  border-top-left-radius: 3vmax;
  border-top-right-radius: 6vmax;
  border-bottom-right-radius: 1.5vmax;
  border-bottom-left-radius: 6vmax;
}
/* 狗狗鼻子 */
.dog__snout {
  position: absolute;
  left: -1.5vmax;
  bottom: 0;
  width: 7.5vmax;
  height: 3.75vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #d7dbd2;
}
/* 狗狗鼻子上方黑圆圈 */
.dog__snout::before {
  content: "";
  position: absolute;
  left: -0.1125vmax;
  top: -0.15vmax;
  width: 1.875vmax;
  height: 1.125vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #1c3130;
}
/* 狗狗鼻梁（眼睛中间的部分） */
.dog__nose {
  position: absolute;
  top: -1.95vmax;
  left: 40%;
  width: 0.75vmax;
  height: 2.4vmax;
  border-radius: 0.525vmax;
  transform-origin: bottom;
  transform: rotateZ(10deg);
  background-color: #d7dbd2;
}

/* 狗狗左右眼睛 */
.dog__eye-l,
.dog__eye-r {
  position: absolute;
  top: -0.9vmax;
  width: 0.675vmax;
  height: 0.375vmax;
  border-radius: 50%;
  background-color: #1c3130;
}

.dog__eye-l {
  left: 27%;
}

.dog__eye-r {
  left: 65%;
}
/* 狗狗尾巴 */
.dog__tail {
  position: absolute;
  right: -3vmax;
  height: 1.5vmax;
  width: 4.5vmax;
  background-color: #e96839;
  border-radius: 1.5vmax;
}

.leg {
  position: absolute;
  bottom: 0;
  width: 3vmax;
  height: 4.125vmax;
}

/* 狗狗脚趾部分 
  容器固定高度，伪类是个圆，超出容器的隐藏
  即可形成半圆
*/
.paw {
  position: absolute;
  bottom: 0;
  left: -4vmax;
  width: 8vmax;
  height: 1.875vmax;
  overflow: hidden;
  z-index: 3;
}
.paw::before {
  content: "";
  position: absolute;
  width: 3.75vmax;
  height: 3.75vmax;
  border-radius: 50%;
}

/* 狗狗腿 
  linear-gradient线性渐变，使狗狗腿上粗下细
*/
.top {
  position: absolute;
  bottom: 0;
  left: 0.75vmax;
  height: 4.5vmax;
  width: 2.625vmax;
  border-top-left-radius: 1.425vmax;
  border-top-right-radius: 1.425vmax;
  transform-origin: bottom right;
  transform: rotateZ(90deg) translateX(-0.1vmax) translateY(1.5vmax);
  z-index: 2;
  background-image: linear-gradient(70deg, transparent 20%, #ff8b56 20%);
}

.dog__paws {
  position: absolute;
  bottom: 0;
  left: 7.5vmax;
  width: 12vmax;
  height: 3vmax;
}

.dog__bl-leg {
  left: -3vmax;
}

.dog__bl-paw::before {
  background-color: #bec4b6;
}

.dog__bl-top {
  background-image: linear-gradient(80deg, transparent 20%, #e96839 20%);
}

.dog__fl-leg {
  z-index: 10;
}

.dog__fl-leg {
  left: 0;
}

.dog__fl-paw::before {
  background-color: #d7dbd2;
}

.dog__fr-leg {
  right: 0;
}

.dog__fr-paw::before {
  background-color: #d7dbd2;
}
.dog__head {
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__head-c {
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__body {
  animation: body 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
@keyframes head {
  0%,
  10%,
  20%,
  26%,
  28%,
  90%,
  100% {
    height: 8.25vmax;
    bottom: 0;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  5%,
  15%,
  22%,
  24%,
  30% {
    height: 8.1vmax;
  }
  32%,
  50% {
    height: 8.25vmax;
  }
  55%,
  60% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  /* 狗狗头部上扬 */
  70%,
  80% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(10deg);
  }
}
@keyframes body {
  0%,
  10%,
  20%,
  26%,
  28%,
  32%,
  100% {
    height: 7.2vmax;
  }
  5%,
  15%,
  22%,
  24%,
  30% {
    height: 7.05vmax;
  }
}
.dog__ear-l {
  animation: ear-l 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__ear-r {
  animation: ear-r 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
@keyframes ear-l {
  0%,
  10%,
  20%,
  26%,
  28%,
  82%,
  100% {
    transform: rotateZ(-50deg);
  }
  5%,
  15%,
  22%,
  24% {
    transform: rotateZ(-48deg);
  }
  30%,
  31% {
    transform: rotateZ(-30deg);
  }
  32%,
  80% {
    transform: rotateZ(-60deg);
  }
}
@keyframes ear-r {
  0%,
  10%,
  20%,
  26%,
  28% {
    transform: rotateZ(20deg);
  }
  5%,
  15%,
  22%,
  24% {
    transform: rotateZ(18deg);
  }
  30%,
  31% {
    transform: rotateZ(10deg);
  }
  32% {
    transform: rotateZ(25deg);
  }
}
.dog__snout {
  animation: snout 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__snout::before {
  animation: snout-b 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__eye-l,
.dog__eye-r {
  animation: eye 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

@keyframes snout {
  0%,
  10%,
  20%,
  26%,
  28%,
  82%,
  100% {
    height: 3.75vmax;
  }
  5%,
  15%,
  22%,
  24% {
    height: 3.45vmax;
  }
}
@keyframes snout-b {
  0%,
  10%,
  20%,
  26%,
  28%,
  98%,
  100% {
    width: 1.875vmax;
  }
  5%,
  15%,
  22%,
  24% {
    width: 1.8vmax;
  }
  34%,
  98% {
    width: 1.275vmax;
  }
}
@keyframes eye {
  0%,
  30% {
    width: 0.675vmax;
    height: 0.3vmax;
  }
  32%,
  59%,
  90%,
  100% {
    width: 0.525vmax;
    height: 0.525vmax;
    transform: translateY(0);
  }
  60%,
  75% {
    transform: translateY(-0.3vmax);
  }
  80%,
  85% {
    transform: translateY(0.15vmax);
  }
}
.dog::before {
  content: "";
  position: absolute;
  bottom: -1vmax;
  right: -0.15vmax;
  width: 100%;
  height: 1.5vmax;
  background-color: rgba(28, 49, 48, 0.1);
  border-radius: 50%;
  z-index: 3;
  animation: shadow 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
@keyframes shadow {
  0%,
  10%,
  20%,
  26%,
  28%,
  30%,
  84%,
  100% {
    width: 99%;
  }
  5%,
  15%,
  22%,
  24% {
    width: 101%;
  }
  34%,
  81% {
    width: 96%;
  }
}
.ball {
  position: absolute;
  top: 36em;
  margin-left: 1.8em;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.ball:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 2em;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: inset 0 -8px 0 0 rgba(0, 0, 0, 0.2);
  background: #6e64f0;
  z-index: 1;
}
.ball:focus {
  outline: none;
}
.ball:focus:after {
  -webkit-animation: bounce 400ms infinite alternate;
  animation: bounce 400ms infinite alternate;
}
@-webkit-keyframes bounce {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
}
@keyframes bounce {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
}
@-webkit-keyframes bounce-shadow {
  from {
    -webkit-transform: scale(2.5, 2.6) translateY(-50%);
    transform: scale(2.5, 2.6) translateY(-50%);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: scale(0.5) translateY(0);
    transform: scale(0.5) translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
}
@keyframes bounce-shadow {
  from {
    -webkit-transform: scale(2.5, 2.6) translateY(-50%);
    transform: scale(2.5, 2.6) translateY(-50%);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: scale(0.5) translateY(0);
    transform: scale(0.5) translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
}
.ball:focus:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  -webkit-animation: bounce-shadow 400ms infinite alternate;
  animation: bounce-shadow 400ms infinite alternate;
  z-index: -10;
}
.dogs {
  position: absolute;
  margin-top: 23em;
  left: 30px;
  width: 100px;
  height: 100px;
  z-index: 1;
  transform: scale(0.65);
}
.dogs:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(-30%) scale(1.5);
  transform: translateY(-30%) scale(1.5);
}
.dogs * {
  position: absolute;
}
.dogs-body {
  top: -50%;
  -webkit-animation: dogs-body 200ms ease-in-out infinite alternate;
  animation: dogs-body 200ms ease-in-out infinite alternate;
}
.dogs-body:before {
  content: "";
  position: absolute;
  bottom: 90%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(255, 255, 255, 0.4);
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-animation: dogs-tail-blur 200ms 33.33333ms ease-in-out infinite
    alternate both;
  animation: dogs-tail-blur 200ms 33.33333ms ease-in-out infinite alternate both;
}
@-webkit-keyframes dogs-tail-blur {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dogs-tail-blur {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@-webkit-keyframes dogs-body {
  from {
    -webkit-transform: translateX(-10%);
    transform: translateX(-10%);
  }
  to {
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
  }
}
@keyframes dogs-body {
  from {
    -webkit-transform: translateX(-10%);
    transform: translateX(-10%);
  }
  to {
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
  }
}
.dogs-head {
  -webkit-animation: dogs-head 1800ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  animation: dogs-head 1800ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
}
@-webkit-keyframes dogs-head {
  from,
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  33.3% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  66.6% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes dogs-head {
  from,
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  33.3% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  66.6% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.dog-torso {
  top: -20%;
  -webkit-animation: dogs-torso 200ms ease-in-out infinite alternate-reverse;
  animation: dogs-torso 200ms ease-in-out infinite alternate-reverse;
}
@-webkit-keyframes dogs-torso {
  from {
    -webkit-transform: translateX(-5%);
    transform: translateX(-5%);
  }
  to {
    -webkit-transform: translateX(5%);
    transform: translateX(5%);
  }
}
@keyframes dogs-torso {
  from {
    -webkit-transform: translateX(-5%);
    transform: translateX(-5%);
  }
  to {
    -webkit-transform: translateX(5%);
    transform: translateX(5%);
  }
}
.dogs-eyes {
  width: 60%;
  top: 55%;
  left: 20%;
  z-index: 1;
}
.dogs-eyes:before {
  content: "";
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  position: absolute;
  background: orange;
  top: -10px;
  left: -10px;
  z-index: 0;
  border: 4px solid white;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.dogs-eye {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  -webkit-animation: dogs-eye 1800ms infinite;
  animation: dogs-eye 1800ms infinite;
}
@-webkit-keyframes dogs-eye {
  from,
  to {
    -webkit-animation-timing-function: step-end;
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%,
  55% {
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
    opacity: 0;
  }
}
@keyframes dogs-eye {
  from,
  to {
    -webkit-animation-timing-function: step-end;
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%,
  55% {
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dogs-eye:first-child {
  left: 0;
}
.dogs-eye:last-child {
  right: 0;
}
.dogs-muzzle {
  width: 60%;
  left: 20%;
  height: 50%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  background: white;
  bottom: -15%;
}
.dogs-muzzle:before,
.dogs-muzzle:after {
  content: "";
  display: block;
  position: absolute;
}
.dogs-muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #eaebec;
}
.dogs-muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dogs-tongue {
  width: 40px;
  height: 100%;
  left: calc(50% - 20px);
  z-index: -1;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-animation: dogs-tongue 1800ms -50ms ease-in-out infinite;
  animation: dogs-tongue 1800ms -50ms ease-in-out infinite;
}
@-webkit-keyframes dogs-tongue {
  from,
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  16.66667% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  33.33333%,
  66.66667% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50%,
  83.33333% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
}
@keyframes dogs-tongue {
  from,
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  16.66667% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  33.33333%,
  66.66667% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50%,
  83.33333% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
}
.dogs-tongue:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #fd3163;
  -webkit-animation: dogs-tongue-inner 100ms ease-in-out infinite alternate;
  animation: dogs-tongue-inner 100ms ease-in-out infinite alternate;
}
@-webkit-keyframes dogs-tongue-inner {
  from {
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
  }
  to {
    -webkit-transform: translateY(22%);
    transform: translateY(22%);
  }
}
@keyframes dogs-tongue-inner {
  from {
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
  }
  to {
    -webkit-transform: translateY(22%);
    transform: translateY(22%);
  }
}
.dogs-ears {
  width: 40%;
  top: 25%;
  left: 30%;
  -webkit-animation: dogs-ears 1800ms 100ms ease infinite;
  animation: dogs-ears 1800ms 100ms ease infinite;
}
@-webkit-keyframes dogs-ears {
  42.3%,
  71.6% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  50.3%,
  79.6% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  5% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  12% {
    -webkit-transform: rotate(-5%);
    transform: rotate(-5%);
  }
  from,
  33.3%,
  66%,
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes dogs-ears {
  42.3%,
  71.6% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  50.3%,
  79.6% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  5% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  12% {
    -webkit-transform: rotate(-5%);
    transform: rotate(-5%);
  }
  from,
  33.3%,
  66%,
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.dogs-ear {
  bottom: -10px;
  height: 50px;
  width: 50px;
  background: #eaebec;
  -webkit-animation-duration: 400ms;
  animation-duration: 400ms;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.dogs-ear:first-child {
  border-bottom-left-radius: 80%;
  border-top-right-radius: 80%;
  right: 100%;
  box-shadow: inset -15px 15px 0 1px white;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}
.dogs-ear:last-child {
  border-top-left-radius: 80%;
  border-bottom-right-radius: 80%;
  left: 100%;
  box-shadow: inset 15px 15px 0 0 white;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.dogs-tail {
  width: 22px;
  height: 24.2px;
  background: white;
  bottom: 40%;
  border-radius: 11px;
  left: calc(50% - 11px);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.dogs-tail .dogs-tail {
  -webkit-animation: dogs-tail-segment 200ms ease-in-out infinite alternate;
  animation: dogs-tail-segment 200ms ease-in-out infinite alternate;
}
@-webkit-keyframes dogs-tail-segment {
  from {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  to {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}
@keyframes dogs-tail-segment {
  from {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  to {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}
.dogs-body > .dogs-tail {
  bottom: 90%;
  -webkit-animation: dogs-tail 200ms ease-in-out infinite alternate;
  animation: dogs-tail 200ms ease-in-out infinite alternate;
}
@-webkit-keyframes dogs-tail {
  from {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@keyframes dogs-tail {
  from {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
.dogs-body,
.dogs-torso,
.dogs-head {
  border-radius: 50%;
  background: white;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dogs-body,
.dogs-torso {
  box-shadow: inset 0 -15px 0 0 #eaebec;
}
.box-canvas {
  position: relative;
  top: 22em;
  margin-right: -38px;
  display: block;
  transform: scale(0.7);
}
.dog1 {
  position: absolute;
  right: 0;
  top: -52px;
  width: 58px;
  height: 75px;
  animation: dogSlide 2s infinite ease-in-out;
}
@keyframes dogSlide {
  10% {
    transform: translateX(-25px);
  }
  70% {
    transform: rotate(-20deg) translate(-185px, 50px);
  }
  90% {
    transform: translate(-205px, 125px);
  }
  100% {
    transform: translate(-205px, 125px);
  }
}
.heart1 {
  opacity: 0;
  position: absolute;
  background: var(--heart-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: -50px;
  left: 60%;
  transform: translateX(-60%);
  animation: heartAppear 2s infinite ease-in-out;
}
.heart1::before {
  content: "";
  position: absolute;
  left: 10px;
  background: var(--heart-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.heart1::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  background: var(--heart-color);
  width: 25px;
  height: 10px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@keyframes heartAppear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.body1 {
  position: absolute;
  left: 13px;
  width: 44px;
  height: 75px;
  border-radius: 25% 10% 20% 20%;
  background: var(--dog-color);
}
.body1::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -3px;
  background: var(--dog-color);
  border-radius: 20%;
  width: 20px;
  height: 30px;
  transform: rotate(45deg);
}
.body1::after {
  content: "";
  position: absolute;
  background: var(--dog-color);
  width: 25px;
  height: 15px;
  top: 20px;
  left: -12px;
  border-radius: 20% 20% 50% 20%;
  border-bottom: 2px solid var(--dog-accent-color);
  animation: dogSmile 2s infinite ease-in-out;
}
@keyframes dogSmile {
  0% {
    border-radius: 20% 20% 20% 20%;
    border-bottom: 0;
  }
  70% {
    border-radius: 20% 20% 50% 20%;
    border-bottom: 2px solid var(--dog-accent-color);
  }
}
.nose1 {
  position: absolute;
  background-color: var(--dog-accent-color);
  width: 8px;
  height: 5px;
  border-radius: 30%;
  top: 20px;
}
.ear1 {
  position: absolute;
  left: 35px;
  width: 20px;
  height: 30px;
  background: var(--dog-accent-color);
  border-radius: 0 0 30% 30%;
}
.eye1 {
  position: absolute;
  left: 22px;
  top: 10px;
  background: var(--dog-accent-color);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.tail1 {
  position: absolute;
  bottom: 0;
  right: -8px;
  width: 10px;
  height: 55px;
  background: var(--dog-color);
  transform: rotate(25deg);
}
.tail1::before {
  content: "";
  position: absolute;
  top: -15px;
  width: 15px;
  height: 25px;
  background: var(--dog-color);
  clip-path: polygon(12% 0, 0% 100%, 100% 100%);
}
.tail1::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 12px;
  height: 25px;
  background: var(--dog-color);
  clip-path: polygon(12% 0, 0% 100%, 100% 100%);
}
.slide {
  position: absolute;
  right: 0;
  width: 270px;
  height: 200px;
}
.slide-main {
  position: absolute;
  bottom: 64px;
  left: 53px;
  width: 200px;
  height: 50px;
  background: var(--slide-color);
  transform: rotate(-45deg);
}
.slide-end {
  position: absolute;
  height: 50px;
  width: 100px;
  background: var(--slide-color);
  bottom: 0;
  border-radius: 50% 0 0 0;
}
.slide-start {
  position: absolute;
  height: 50px;
  top: 23px;
  width: 63px;
  background: var(--slide-color);
  right: 0;
}
.slide-start::after {
  content: "";
  position: absolute;
  height: 177px;
  width: 10px;
  background: var(--ladder-color);
  right: 0;
}
</style>