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

代码语言：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(--left-elbow-angle);
}

.right .elbow {
  rotate: var(--right-elbow-angle);
}

.waist > .joint {
  rotate: var(--waist-joint-angle);
}

.knee {
  bottom: 0;
  rotate: calc(var(--waist-joint-angle) * -2);
}

.body {
  --w: 30px;
  --h: 30px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAIZJREFUSEtjZEADG1rN/qOLUYMfUH2KEdkcOIdWFqI7GuYAsMX0shTmCJDlA2cxvX0L8zXjqMXUyDrEmDEa1MSEElXUjAY1VYKRGENGg5qYUKKKmtGgpkowEmPICAzqkdfmGlAf09NylHb1gFpMD8uRuzEo/RlaWo6z74Rc2lC7rY1uKcguAOOsW5NYqXbPAAAAAElFTkSuQmCC);
}

.head {
  top: calc(var(--m) * -10px);
  left: calc(var(--m) * 4px);
  --w: 22px;
  --h: 22px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAGtJREFUSEtjZMACNrSa/ccmjkssoPoUI7ocigCpBqIbhmwB3GBKDYVZAjMcbDC1DEU2nJHahsIMHzUYnlBGg2I0KDCLpyGYKmhWCNHUYGoajlIew+KU0iIUaw2CnGBItYBgnUeO4dgMBZkDAArwRQ8BLYjYAAAAAElFTkSuQmCC);
  z-index: 1;
}

.face {
  top: calc(var(--m) * 5px);
  left: calc(var(--m) * 4px);
  --w: 18px;
  --h: 14px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2ky3AAAAAXNSR0IArs4c6QAAAHVJREFUOE+1k9sOwCAIQ9f//2gWiBCCuO7ifMKIB2gKjnRERPKdxQDgORY8BdQCCsRXSHT0C0hHvitTzY3Rkm4U1uXuB6loW0ZjnmHvSx913a06Nh95pc4GWdRh3KkxZ1yC2DhDV2ME6M2qTLtWKzO3Z4D/PQHES1jzyue2wwAAAABJRU5ErkJggg==);
}

.reverse .face {
  left: 0;
}

.shoulder {
  width: calc(100% + (calc(var(--m) * 10px)));
  top: 0;
  left: calc(var(--m) * -5px);
  height: calc(var(--m) * 10px);
}

.waist {
  height: calc(var(--m) * 10px);
  bottom: 0;
  width: 100%;
}

.right-leg {
  right: 0;
}

.thigh,
.leg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAYAAAC07qxWAAAAAXNSR0IArs4c6QAAADhJREFUOE9jZICCDa1m/2FsZDqg+hQjiA8mcCmCaQApZiSkCKZ4VCG28IaLjQYPlYKH6IRLbFYAAGcMNrX4mA6GAAAAAElFTkSuQmCC);
  --w: 10px;
  --h: 20px;
}

.joint {
  width: calc(var(--m) * 10px);
  height: calc(var(--m) * 10px);
}

.arm {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAZCAYAAAAIcL+IAAAAAXNSR0IArs4c6QAAADpJREFUOE9jZICCDa1m/2FsZDqg+hQjiA8mcCmCaQApZiSkCKZ4VCG28IaLjQbPaPBghADxuZDYfA0AXddCzD8VHloAAAAASUVORK5CYII=);
  --w: 10px;
  --h: 25px;
}

.monkey.jump .body {
  animation: jump-up forwards 0.35s;
}

@keyframes jump-up {
  0%, 100% {
    translate: 0;
  }
  70% {
    translate: 0 calc(var(--m) * var(--jump-height));
  }
}

.monkey .body {
  top: calc(var(--m) * 30px);
  left: calc(var(--m) * -28px);
}

.monkey.alternate .body {
  top: calc(var(--m) * 28px);
  left: calc(var(--m) * -10px);
}

.monkey.reverse .body {
  top: calc(var(--m) * 28px);
  left: calc(var(--m) * -15px);
}

.monkey.reverse.alternate .body {
  top: calc(var(--m) * 30px);
  left: calc(var(--m) * 0px);
}

.outer-handle-wrapper {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  max-width: 1000px;
  left: 50%;
  transform: translateX(-50%);
}

.outer-handle-wrapper:last-of-type {
  padding-bottom: 440px;
}

.tail-joint {
  width: calc(4px * var(--m));
  height: calc(4px * var(--m));
  bottom: 0;
  left: 2px;
  transform: rotate(var(--tail-base-angle));
}

.tail-joint .joint {
  width: calc(4px * var(--m));
  height: calc(4px * var(--m));
  bottom: 0;
  transform: rotate(var(--tail-angle));
}

.reverse .tail-joint {
  left: calc(28px * var(--m));
}

.tail {
  width: calc(4px * var(--m));
  height: calc(12px * var(--m));
  background-color: #b08536;
}

.outer-handle-wrapper:nth-child(even) {
  flex-direction: row-reverse;
} 

.handle-wrapper {
  width: 20px;
  height: 100%;
}

.handle-wrapper:nth-child(2) {
  padding-top: 20px;
}

.handle-wrapper:nth-child(3) {
  padding-top: 40px;
}

.handle-wrapper:nth-child(4) {
  padding-top: 60px;
}

.handle-wrapper:nth-child(5) {
  padding-top: 80px;
}

.handle {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAADpJREFUKFNjZEACnPqK/5H53y/eZ4Tx4Qx0RTAFMMVghbgUIStmJKQIbvUAKiTaMzDHEhU8uBQjBzgAXjoda3RhMkUAAAAASUVORK5CYII=);
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.text-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  margin: 80px auto 0;
}

p {
  text-align: center;
  color: #b08536;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.3rem;
}

small {
  font-si.........完整代码请登录后点击上方下载按钮下载查看