js+css实现页面滚动猴子跟随攀爬动画效果代码-html代码-BFW代码库

js+css实现页面滚动猴子跟随攀爬动画效果代码

代码语言：html

代码描述：js+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: #024f32;
  color: white;
}

.monkey {
  position: absolute;
  transition: 0.7s;
  width: 10px;
  height: 10px;
  transform: translateX(44px);
  --m: 1;
  --left-shoulder-angle: 40deg;
  --right-shoulder-angle: -170deg;
  --left-shoulder-pos: 0px;
  --right-shoulder-pos: calc(var(--m) * 30px);
  --left-elbow-angle: -50deg;
  --right-elbow-angle: -20deg;
  --waist-joint-angle: -45deg;
  --tail-angle: 12deg;
  --tail-base-angle: 40deg;
  --jump-height: 50px
}

.monkey.reverse:not(.alternate) {
  --left-shoulder-angle: 10deg;
  --right-shoulder-angle: 140deg;
  --left-elbow-angle: 50deg;
  --right-elbow-angle: 30deg;
  --waist-joint-angle: 45deg;
  --tail-angle: -12deg;
  --tail-base-angle: -40deg;
}

.monkey.alternate {
  --left-shoulder-angle: -140deg;
  --right-shoulder-angle: -20deg;
  --left-elbow-angle: -30deg;
  --right-elbow-angle: -20deg;
}

.monkey.alternate.reverse {
  --left-shoulder-angle: 170deg;
  --right-shoulder-angle: -40deg;
  --left-elbow-angle: 20deg;
  --right-elbow-angle: 50deg;
  --waist-joint-angle: 45deg;
  --tail-angle: -12deg;
  --tail-base-angle: -40deg;
}

.swing-wrapper {
  width: 10px;
  height: 10px;
  animation: swing ease-in-out infinite 3s;
}

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

.monkey * {
  position: absolute;
  transition: 0.7s;
  background-size: calc(var(--w) * var(--m)) calc(var(--h) * var(--m)) !important; 
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.left {
  rotate: var(--left-shoulder-angle);
  translate: var(--left-shoulder-pos) 0;
  z-index: 5;
}

.reverse .left {
  z-index: -5;
}

.reverse .right {
  z-index: 5;
}

.right {
  rotate: var(--right-shoulder-angle);
  translate: var(--right-shoulder-pos) 0;
  z-index: -5;
}

.elbow {
  bottom: 0;
}

.left .elbow {
  rotate: var(--lef.........完整代码请登录后点击上方下载按钮下载查看