js实现一只小猫咪跟随鼠标交互行走跳跃动画效果代码-html代码-BFW代码库

js实现一只小猫咪跟随鼠标交互行走跳跃动画效果代码

代码语言：html

所属分类：其他

代码描述：js结合svg及css实现一只小猫咪跟随鼠标进行交互行走并时不时跳跃动画效果代码

下面为部分代码预览，完整代码请点击下载或在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 ,
.fac.........完整代码请登录后点击上方下载按钮下载查看