js实现跟随鼠标走动交互的小猫宠物效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现跟随鼠标走动交互的小猫宠物效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #63ec85;
}

.outer_wrapper {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  height: calc(100vh - 100px);
  width: 100%;
  top: 0;
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-color: rgb(1, 143, 96);
}

.cat {
  position: absolute;
  bottom: 65px;
  left: 100px;
  height: 30px;
  width: 60px;
  transition: 1.5s;
  transform-origin: center;
  background-color: transparent;
}

/* body */

.body {
  position: absolute;
  height: 30px;
  width: 60px;
}

.face_left .body { 
  animation: turn_body_left forwards 0.5s;
}

@keyframes turn_body_left {
  0%,100% { transform: scale(1); }
  50% { transform: scale(0.5, 1); }
}

.face_right .body {
  animation: turn_body_right forwards 0.5s;
}

@keyframes turn_body_right {
  0%,100% { transform: scale(1); }
  50% { transform: scale(0.5, 1); }
}

/* head */
.cat_head {
  position: absolute;
  height: 40px;
  width: 48px;
  right: -10px;
  top: -30px;
  transition: 0.5s;
  z-index: 50;
}

.first_pose .cat_head,
.face_left .cat_head{ 
  right: 22px;
}


/* tail */
.tail {
  position: absolute;
  top: -25px;
  height: 36px;
  width: 15px;
  animation: tail_motion forwards 2s;
  transform-origin: bottom right;
}

@keyframes tail_motion {
  0%,100% { 
    left: -5px;
    transform: rotate(0deg) scale(1); 
  }
  50% { 
    left: -10px;
    transform: rotate(-50deg) scale(-1,1); 
  }
}

.first_pose .tail ,
.face_left .tail {
  left: 45px;
  animation: tail_motion_alt forwards 2s;
}

@keyframes tail_motion_alt {
  0%,100% { 
    left: 45px;
    transform: rotate(0deg) scale(1); 
  }
  50% { 
    left: 40px;
    transform: rotate(50deg) scale(-1,1); 
  }
}



/* legs */
.leg {
  position: absolute;
  height: 20px;
  width: 10px;
  transform-origin: top center;
}

.front_legs,
.back_legs {
  position: absolute;
  height: 30px;
  transition: 0.7s;
}

.front_legs {
  width: 30px;
  right: 0;
}

.back_legs {
  width: 25px;
  left: 0; 
}

.face_left .leg svg {
  transform: scale(-1,1);
}

.face_right .front_legs{ right: 0; }

.first_pose .front_legs,
.face_left .front_legs{ right: 30px; }

.face_right .back_legs{ left: 0; }

.first_pose .back_legs,
.face_left .back_legs{ left: 35px; }

.one,
.three  {
  bottom: -15px;
  right: 0;
}

.two, 
.four {
  bottom: -15px;
  left: 0px;
}

.one.walk, 
.three.walk {
  animation: infinite 0.3s walk;
}

.two.walk, 
.four.walk {
  animation: infinite 0.3s walk_alt;
}

@keyframes walk {
  0%,100% {transform: rotate(-10deg);}
  50% {transform: rotate(10deg);}
}

@keyframes walk_alt {
  0%,100% {transform: rotate(10deg);}
  50% {transform: rotate(-10deg);}
}


/* jump */
.cat_wrapper {
  position: absolute;
  bottom: 0;
}

.cat_wrapper.jump .one { 
  animation: infinite 0.3s walk;
}

.cat_wrapper.jump .two { 
  animation: infinite 0.3s walk_alt;
}

.cat_wrapper.jump .three,
.cat_wrapper.jump .four {
  animation: none;
}

.cat_wrapper.jump .cat.face_right .back_legs {
  transform-origin: center;
  transform: rotate(50deg);
}

.cat_wrapper.jump .cat.face_left .back_legs {
  transform-origin: center;
  transform: rotate(-50deg);
}

.cat_wrapper.jump .cat.face_right .front_legs {
  transform-origin: center;
  transform: rotate(-60deg);
}

.cat_wrapper.jump .cat.face_left .front_legs {
  transform-origin: center;
  transform: rotate(60deg);
}

.cat_wrapper.jump{
  animation: jump forwards 1s;
}

@keyframes jump {
  0%, 100%  {bottom: 0px;}
  50% {bottom: 200px;}
}

.jump .face_left{ 
  animation: forwards 0.5s body_stand_left;
  transform-origin: right bottom;
}

.jump .face_right{ 
  animation: forwards 0.5s body_stand_right;
  transform-origin: left bottom;
}

@keyframes body_stand_right {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-45deg);}
}

@keyframes body_stand_left {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(45deg);}
}

svg {
  height: 100%;
  width: 100%;
}

polygon.eyes {
  fill: rgb(1, 143, 96);
}

polygon,
path {
  fill: white;
}

.sign {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>


</head>

  <body>

  <div class="outer_wrapper">
    <div class="wrapper">

      <div class="cat_wrapper">
        <div class="cat first_pose">
          <div class="cat_head">
            <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 76.4 61.2" >
              <polygon class="eyes" points="63.8,54.1 50.7,54.1 50.7,59.6 27.1,59.6 27.1,54.1 12.4,54.1 12.4,31.8 63.8,31.8 "/>
              <path d="M15.3,45.9h5.1V35.7h-5.1C15.3,35.7,15.3,45.9,15.3,45.9z M45.8,56.1V51H30.6v5.1H45.8z M61.1,35.7H56v10.2h5.1
                V35.7z M10.2,61.2v-5.1H5.1V51.........完整代码请登录后点击上方下载按钮下载查看