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

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

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