TweenMax+svg实现跟随鼠标移动交互的卡通狗效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现跟随鼠标移动交互的卡通狗效果代码，小狗会沿着鼠标的方向望去。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #eeae17;
}
body .wrap {
  width: 300px;
  height: 300px;
  background: #0066ff;
  position: relative;
  box-shadow: 0 -10px 0 0 #0057d9;
}
body .body {
  width: 150px;
  height: 60px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: calc(50% - 75px);
  border-radius: 40px 40px 0 0;
  z-index: 4;
  -webkit-animation: squiggly-anim 0.4s infinite;
          animation: squiggly-anim 0.4s infinite;
}
@-webkit-keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    -webkit-filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    -webkit-filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
body .body .leg {
  width: 45px;
  height: 60px;
  position: absolute;
  background: #fff;
  transform-style: preserve-3d;
  z-index: 2;
  left: -15px;
  transform: translateZ(3px);
  border-radius: 60px 30px 30px 30px;
  transform-origin: 130% 0%;
  top: 0px;
}
body .body .leg.r {
  left: auto;
  right: -15px;
  border-radius: 30px 60px 30px 30px;
  transform-origin: -30% 0%;
}
body .body .leg.r .paw {
  transform-origin: 100% 0%;
}
body .body .leg .paw {
  width: 45px;
  height: 40px;
  position: absolute;
  background: #e6e6e6;
  border-radius: 15px;
  bottom: 0px;
  overflow: hidden;
  left: -2.5px;
  transform-origin: 0% 0%;
}
body .body .leg .paw:before {
  content: "";
  position: absolute;
  width: 3px;
  height: 15px;
  background: #010101;
  bottom: 0;
  left: 12.5px;
  border-radius: 50px 50px 0 0;
  box-shadow: 15px 0 0 #010101;
}
body .body .spots {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateZ(2px);
}
body .body .spots:before, body .body .spots:after {
  content: "";
  position: absolute;
  width: 20%;
  height: 100%;
  top: 20px;
  background: #252510;
  border-radius: 0 20% 100% 0;
  transform: translateZ(2px);
}
body .body .spots:after {
  right: 0;
  border-radius: 20% 0 0 100%;
}
body .body .head {
  position: absolute;
  width: 150px;
  height: 130px;
  top: -120px;
  z-index: 3;
  border-radius: 1600px 1600px 1500px 1500px/2400px 2400px 1200px 1200px;
  transform-style: preserve-3d;
  transform: translateZ(1px);
}
body .body .head .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1600px 1600px 1500px 1500px/2400px 2400px 1200px 1200px;
  transform: translateZ(-2px);
  overflow: hidden;
}
body .body .head .inner .spot {
  position: absolute;
  background: #252510;
  width: 100px;
  height: 110px;
  border-radius: 100%;
  left: -25px;
  top: -25px;
  box-shadow: 0 0 0 150px #fff;
}
body .body .head .ear {
  position: absolute;
  width: 65px;
  height: 100px;
  background: #131308;
  box-shadow: inset -5px 0 0 15px #252510;
  top: -50px;
  z-index: -5;
  left: -10px;
  transform-style: preserve-3d;
  transform: translateZ(-2px);
  transform-origin: 100% 100%;
  border-radius: 100px 300px 50px 150px/100px 600px 50px 350px;
}
body .body .head .ear:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 55px;
  background: #252510;
  z-index: -1;
  transform: translateZ(-3px) rotate(-20deg);
  border-radius: 0 0 100% 100%;
  bottom: -35px;
  left: 20px;
}
body .body .head .ear.right {
  left: auto;
  right: -10px;
  border-radius: 300px 100px 150px 50px/600px 100px 350px 50px;
  background: #cccccc;
  box-shadow: inset 5px 0 0 15px #fff;
  transform-origin: 0% 100%;
}
body .body .head .ear.right:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 55px;
  background: #fff;
  z-index: -1;
  transform: translateZ(-3px) rotate(20deg);
  border-radius: 0 0 100% 100%;
  bottom: -35px;
  left: auto;
  right: 20px;
}
body .body .head .eyes {
  position: absolute;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 100%;
  top: 35px;
  left: 30px;
  overflow: hidden;
  transform: translateZ(2px);
}
body .body .head .eyes:before, body .body .head .eyes:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  background: #252510;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  -webkit-animation: blink 5s ease-in-out infinite;
          animation: blink 5s ease-in-out infinite;
}
@-webkit-keyframes blink {
  90% {
    transform: translateY(-120%);
  }
  92% {
    transform: translateY(0);
  }
  94% {
    transform: translateY(-120%);
  }
  96% {
    transform: translateY(0);
  }
  98% {
    transform: translateY(-120%);
  }
}
@keyframes blink {
  90% {
    transform: translateY(-120%);
  }
  92% {
    transform: translateY(0);
  }
  94% {
    transform: translateY(-120%);
  }
  96% {
    transform: translateY(0);
  }
  98% {
    transform: translateY(-120%);
  }
}
body .body .head .eyes:after {
  top: auto;
  bottom: 0;
  transform: translateY(120%);
  -webkit-animation: blink2 5s ease-in-out infinite;
          animation: blink2 5s ease-in-out infinite;
}
@-webkit-keyframes blink2 {
  90% {
    transform: translateY(120%);
  }
  92% {
    transform: translateY(0);
  }
  94% {
    transform: translateY(120%);
  }
  96% {
    transform: translateY(0);
  }
  98% {
    transform: translateY(120%);
  }
}
@keyframes blink2 {
  90% {
    transform: translateY(120%);
  }
  92% {
    transform: translateY(0);
  }
  94% {
    transform: translateY(120%);
  }
  96% {
    transform: translateY(0);
  }
  98% {
    transform: translateY(120%);
  }
}
body .body .head .eyes:nth-of-type(2) {
  left: auto;
  right: 30px;
}
body .body .head .eyes:nth-of-type(2):before, body .body .head .eyes:nth-of-type(2):after {
  background: #fff;
}
body .body .head .snout {
  position: absolute;
  width: 80px;
  height: 70px;
  background: #fff;
  border-radius: 45%;
  left: calc(50% - 40px);
  bottom: 20px;
  transform: translateZ(2px);
}
body .body .head .snout .nose {
  width: 30px;
  height: 25px;
  position: absolute;
  background: black;
  left: calc(50% - 15px);
  bottom: 30px;
  border-radius: 10px;
}
body .body .head .snout .nose:before {
  content: "";
  position: absolute;
  width: 2px;
  height: 10px;
  background: black;
  bottom: -8px;
  left: calc(50% + 1px);
}
body .body .head .snout .nose:after {
  content: "";
  position: absolute;
  width: 70%;
  height: 20px;
  border: 2px solid;
  border-color: black transparent transparent transparent;
  bottom: -30px;
  left: 15%;
  border-radius: 50%;
}
</style>

</head>

<body>
    <!.........完整代码请登录后点击上方下载按钮下载查看