css+div布局实现卡通大头娃娃跳跃动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css+div布局实现卡通大头娃娃跳跃动画效果代码，按空格键触发
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
:root {
  --head-width: 200px;
  --eye-width: 57px;
  --eye-width-inside: calc(var(--eye-width) - 13px);
  --skip-color: #ff0059;
  --background: #ced3d7;

  --body-height: 165px;
  --angriness: 3deg;
  --animation-duration: 1000ms;
  --animation-type: ease;
}
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--background);
  font-family: "Press Start 2P", cursive;
}
.container {
  display: flex;
  justify-content: center;
}
#text {
  opacity: 0;
  font-size: 1rem;
  animation: text-animation 1.2s ease-out infinite;
  text-shadow: 1px 1px black;
  color: #3f51b5;
  position: absolute;
  top: 10%;
  text-align:center;
}
#text.stop {
  animation: none;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  height: 650px;
  width: 410px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  scale: 0.5;
}

.shadow {
  width: 60%;
  height: 4px;
  background-color: black;
  opacity: 0.2;
  transform: translate(0px, 10px);
}

.animate .shadow {
  animation: shadow var(--animation-duration) var(--animation-type);
}

.head {
  width: var(--head-width);
  height: calc(var(--head-width) - 12px);
  background-color: var(--skip-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin-top: 50px;
}

.animate .face {
  animation: jump-face var(--animation-duration) var(--animation-type);
}

.eyes-wrapper {
  display: flex;
  align-self: stretch;
  justify-content: space-between;
  padding-left: 30px;
  padding-right: 30px;
}

.eye {
  width: var(--eye-width);
  height: var(--eye-width);
  position: relative;
  border-top: solid 4px black;
  transform: rotate(var(--angriness));
  overflow: hidden;
}

.eye::before,
.eye::after {
  content: "";
  position: absolute;
  border-bottom-left-radius: calc(var(--eye-width) * 2);
  border-bottom-right-radius: calc(var(--eye-width) * 2);
  top: 0;
}

.eye::before {
  background-color: white;
  right: 4px;
  width: var(--eye-width-inside);
  height: calc(var(--eye-width-inside) / 2);
}

.eye::after {
  border-radius: 50%;
  transform: translateY(calc(var(--eye-width-inside) / 4 * -1));
  background-color: black;
  right: calc(var(--eye-width-inside) / 4 + 4px);
  width: calc(var(--eye-width-inside) / 2);
  height: calc(var(--eye-width-inside) / 2);
}
.animate .eye::after {
  animation: jump-eyes var(--animation-duration) var(--animation-type);
}

.eye--right {
  transform: rotate(calc(var(--angriness) * -1));
}

.eye--right::before {
  right: 0px;
  left: 4px;
}

.eye--right::after {
  right: 0;
  left: calc(var(--eye-width-inside) / 4 + 4px);
}
.animate .eye--right::after {
  animation: jump-eyes var(--animation-duration) var(--animation-type);
}

.mouth {
  width: 35px;
  height: 3px;
  margin-top: -15px;
  background-color: black;
}

.body-wrapper {
  height: var(--body-height);
  position: relative;
  margin-top: -20px;
  z-index: -1;
}

.body {
  background-color: var(--skip-color);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  width: 100%;
  height: 70%;
  z-index: 2;
}
.belly {
  position: relative;
  width: 100%;
  height: 40%;
  background-color: var(--skip-color);
  border-radius: 50px;
  margin-top: -10%;
  z-index: 2;
}
.belly::after {
  content: "";
  position: absolute;
  width: 50%;
  border-radius: 40%;
  border-bottom: solid 3px black;
  height: 20%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.animate .belly::after {
  animation: jump-belly var(--animation-duration) var(--animation-type);
}
.hands-wrapper {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  width: 100%;
}

.hand {
  width: 40px;
  height: 150px;
  background-color: var(--skip-color);
  transform-origin: 30px 70px;
  transform: rotate(25deg);
}

.palm {
  width: 100%;
  height: 35px;
  position: absolute;
  bottom: -15px;
  transform: rotate(-45deg);
}

.animate .palm {
  animation: jump-palm var(--animation-duration) var(--animation-type);
}

.animate .hand--right .palm {
  animation: jump-palm--right var(--animation-duration) var(--animation-type);
}

.hand--right .palm {
  transform: rotate(45deg);
}

.palm::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--skip-color);
  border-radius: 40%;
}

.finger {
  position: absolute;
  width: 15px;
  height: 100%;
  background-color: var(--skip-color);
  z-index: 1;
  border-radius: 15px;
  transform: rotate(-5deg) translate(0px, 20px);
}
.animate .finger:nth-child(1) {
  animation: jump-finger1 var(--animation-duration) var(--animation-type);
}
.animate .finger:nth-child(2) {
  animation: jump-finger2 var(--animation-duration) var(--animation-type);
}
.animate .finger:nth-child(3) {
  animation: jump-finger3 var(--animation-duration) var(--animation-type);
}
.animate .finger:nth-child(4) {
  animation: jump-finger4 var(--animation-duration) var(--animation-type);
}
.animate .hand--right .finger:nth-child(4) {
  animation: jump-finger4--right var(--animation-duration) var(--animation-type);
}

.finger:nth-child(2) {
  transform: rotate(-5deg) translate(5px, 17px);
}

.finger:nth-child(3) {
  transform: rotate(-5deg) translate(5px, 17px);
}

.finger:nth-child(4) {
  transform: rotate(15deg) translate(26px, 0px);
}

.animate .hand {
  animation: jump-hand var(--animation-duration) var(--animation-type);
}

.hand--right {
  transform-origin: 6px 70px;
  transform: rotate(-25deg);
}

.animate .hand--right {
  animation: jump-hand-right var(--animation-duration) var(--animation-type);
}

.hand--right .finger {
  transform: rotate(5deg) translate(1px, 3px);
}
.hand--right .finger:nth-child(2),
.finger:nth-child(3) {
  transform: rotate(5deg) translate(15px, 8px);
}
.hand--right .finger:nth-child(4) {
  transform: rotate(5deg) translate(26px, 12px);
}

.legs {
  --legs-height: 100px;
  height: var(--legs-height);
  width: 50%;
  z-index: -9;
  position: relative;
  margin: 0 3px;
}

.legs-right {
  transform: scaleX(-1);
}

.legs-top {
  width: 100%;
  height: 50px;
  background-color: var(--skip-color);
  transform: skew(0deg, 0deg);
  position: relative;
}
.legs-top::before {
  content: "";
  position: absolute;
  height: 30px;
  width: 100%;
  background-color: var(--skip-color);
  top: -30px;
  z-index: -9;
}
.legs-mid {
  width: 100%;
  height: 50px;
  background-color: var(--skip-color);
  transform: skew(0deg, 0deg);
}
.legs-bottom {
  width: 110%;
  height: 10px;
  background-color: var(--skip-color);
  border-radius: 10px 0 0 0;
  transform: translate(-10px, 0px);
}
.animate .legs-right .legs-top {
  animation: none;
}
.animate .legs-right .legs-top::before {
  animation: jump-leg-top-right-offset var(--animation-duration)
    var(--animation-type);
}

.animate .legs-top {
  animation: jump-leg-top var(--animation-duration) var(--animation-type);
}

.animate .legs-mid {
  animation: jump-leg-mid var(--animation-duration) var(--animation-type);
}
.animate .legs-bottom {
  animation: jump-leg-bottom var(--animation-duration) var(--animation-type);
}

.animate .legs {
  animation: jump-legs var(--animation-duration) var(--animation-type);
}
.animate .legs-right {
  animation: jump-legs-right var(--animation-duration) var(--animation-type);
}

.legs-container {
  display: flex;
  justify-content: space-between;
}

.legs-foot {
  background-color: white;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: translate3d(0, 0, 0) rotateX(-90deg);
}

.legs-right .legs-mid {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  padding: 5px 10px;
}
.animate .legs-right .legs-foot {
  animation: jump-legs-foot var(--animation-duration) var(--animation-type);
}
.animate .legs-right .legs-mid {
  animation: jump-legs-right-mid var(--animation-duration) var(--animation-type);
}
.animate .legs-right .legs-bottom {
  animation: jump-legs-right-bottom var(--animation-duration)
    var(--animation-type);
}

@keyframes jump-leg-bottom {
  20% {
    transform: translate(-4px, 0px);
  }
  30% {
    transform: translate(-7px, 0px) rotate(-20deg);
  }
  40% {
    transform: translate(-7px, 0px) rotate(-20deg);
  }
  50% {
    transform: translate(-7px, 0px) rotate(-20deg);
  }
  70% {
    transform: translate(-4px, 0px);
  }
}

@keyframes jump-legs-right-bottom {
  30% {
    height: 0;
  }
  40% {
    height: 0;
  }
  50% {
    height: 0;
  }
}

@keyframes jump-legs-foot {
  20% {
    transform: translate3d(0, 0, 0) rotateX(-90deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
  40% {
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
  70% {
    transform: translate3d(0, 0, 0) rotateX(-90deg);
  }
}

@keyframes jump-legs-right-mid {
  30% {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  }
  40% {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  }
}

@keyframes jump-leg-mid {
  20% {
    height: 50px;
    transform: skew(15deg, 0deg);
  }
  30% {
    height: 60px;
    transform: skew(0deg, -20deg);
  }
  40% {
    height: 60px;
    transform: skew(0deg, -20deg);
  }
  50% {
    height: 60px;
    transform: skew(0deg, -20deg);
  }
  70% {
    height: 50px;
    transform: skew(15deg, 0deg);
  }
}

@keyframes jump-leg-top {
  20% {
    transform: skew(-15deg, 0deg);
  }
  30% {
    transform: skew(0deg, -20deg);
  }
  40% {
    transform: skew(0deg, -20deg);
  }
  50% {
    transform: skew(0deg, -20deg);
  }
  70% {
    transform: skew(-15deg, 0deg);
  }
}

@keyframes jump-leg-top-right-offset {
  70% {
    transform: rotate(2.........完整代码请登录后点击上方下载按钮下载查看