gsap实现键盘控制小人溜冰游戏动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：gsap实现键盘控制小人溜冰游戏动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.loading {
  --arm-front: 24deg;
  --arm-front-end: -48deg;
  --arm-back: 164deg;
  --arm-back-end: -50deg;
  --leg-front: 40deg;
  --leg-front-end: 30deg;
  --leg-back: 120deg;
  --leg-back-end: -36deg;
  --board-r: 0deg;
  --board-x: 0px;
  --body-r: 12deg;
  --body-y: -65%;
  --body-x: -85%;
  --skate-x: 0px;
  --skate-y: 0px;
  --color: #F9A28E;
  --line-top-x: 0%;
  --line-bottom-x: 0%;
  position: relative;
}
.loading .skate {
  position: relative;
  width: 40px;
  height: 46px;
  transform: translate(var(--skate-x), var(--skate-y)) translateZ(0);
}
.loading .skate .body {
  background: var(--color);
  height: 15px;
  width: 7px;
  border-radius: 4px;
  transform-origin: 4px 11px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(var(--body-x), var(--body-y)) rotate(var(--body-r)) translateZ(0);
}
.loading .skate .body:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  bottom: 16px;
  left: 0;
  position: absolute;
  background: var(--color);
  transform: translateY(-0.5px);
}
.loading .skate .body .arm,
.loading .skate .body .arm:before,
.loading .skate .body .leg,
.loading .skate .body .leg:before {
  content: "";
  width: var(--w, 11px);
  height: 4px;
  top: var(--t, 0);
  left: var(--l, 2px);
  border-radius: 2px;
  transform-origin: 2px 2px;
  position: absolute;
  background: var(--color);
  transform: rotate(var(--r, 0deg));
}
.loading .skate .body .arm:before {
  --l: 8px;
}
.loading .skate .body .arm.front {
  --r: var(--arm-front);
}
.loading .skate .body .arm.front:before {
  --r: var(--arm-front-end);
}
.loading .skate .body .arm.back {
  --r: var(--arm-back);
}
.loading .skate .body .arm.back:before {
  --r: var(--arm-back-end);
}
.loading .skate .body .leg {
  --w: 11px;
  --t: 11px;
}
.loading .skate .body .leg:before {
  --t: 0;
  --l: 8px;
}
.loading .skate .body .leg.front {
  --r: var(--leg-front);
}
.loading .skate .body .leg.front:before {
  --r: var(--leg-front-end);
}
.loading .skate .body .leg.back {
  --l: 1px;
  --r: var(--leg-back);
}
.loading .skate .body .leg.back:before {
  --r: var(--leg-back-end);
}
.loading .skate .board {
  position: absolute;
  left: 2px;
  bottom: -1px;
  transform: translateX(var(--board-x)) rotate(var(--board-r)) translateZ(0);
  transform-origin: 7px 5.5px;
}
.loading .skate .board svg {
  display: block;
  width: 34px;
  height: 8px;
  fill: var(--color);
}
.loading .line {
  height: 3px;
  border-radius: 1px;
  overflow: hidden;
  position: absolute;
  right: 105%;
  top: 18px;
  width: 16px;
  transform: scaleY(0.75);
}
.loading .line:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--color);
  transform: translateX(var(--x, var(--line-top-x)));
}
.loading .line.bottom {
  --x: var(--line-bottom-x);
  width: 13px;
  top: 24px;
}

.link {
  position: absolute;
  right: 32px;
  top: 32px;
}
.link svg {
  display: block;
  width: 32px;
  height: 32px;
}

#keyboard {
  display: grid;
  grid-gap: 8px;
  position: absolute;
  left: 50%;
  bottom: 48px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transform: translateX(-50%);
}
#keyboard button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 36px;
  width: 40px;
  border-radius: 7px;
  background: #2C2C31;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(var(--scale, 1)) translateZ(0);
  transition: transform 0.15s;
}
#keyboard button svg {
  display: block;
  width: 8px;
  height: 8px;
  fill: var(--color, #7F7F85);
  transition: fill 0.15s;
}
#keyboard button.up {
  grid-row: 1;
  grid-column: 2;
}
#keyboard button.left {
  grid-row: 2;
  grid-column: 1;
}
#keyboard button.right {
  grid-row: 2;
  grid-column: 3;
}
#keyboard button.down {
  grid-row: 2;
  grid-column: 2;
}
#keyboard button.pressed {
  --scale: .95;
  --color: #fff;
}
#keyboard span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  line-height: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #7F7F85;
  text-align: center;
  transition: opacity 0.25s;
}
#keyboard span strong {
  transition: color 0.15s;
  color: var(--color, #7F7F85);
}
#keyboard span.hide {
  opacity: 0;
  pointer-events: none;
}
#keyboard span.pressed {
  --color: #fff;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #242428;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
</style>



</head>

<body  >
  <div class="loading">
    <div class="skate">
        <div class="body">
            <div class="arm back"></div>
            <div class="arm front"></div>
            <div class="leg back"></div>
            <div class="leg front"></div>
        </div>
        <div class="board">
            <svg viewBox="0 0 34 8">
                <path d="M0.897306 0.911767C1.22218 0.30263 1.97934 0.072188 2.58848 0.397061L2.91936 0.573532C3.75214 1.01768 4.68144 1.25 5.62525 1.25H28.3752C29.3191 1.25 30.2484 1.01768 31.0811 0.573532L31.412 0.397061C32.0212 0.072188 32.7783 0.30263 33.1032 0.911767C33.4281 1.5209 33.1976 2.27807 32.5885 2.60294L32.2576 2.77941C31.0627 3.41667 29.7294 3.75 28.3752 3.75H27.9692C28.5841 4.09118 29.0002 4.747 29.0002 5.5C29.0002 6.60457 28.1048 7.5 27.0002 7.5C25.8957 7.5 25.0002 6.60457 25.0002 5.5C25.0002 4.747 25.4164 4.09118 26.0312 3.75H7.96925C8.5841 4.09118 9.00025 4.747 9.00025 5.5C9.00025 6.60457 8.10482 7.5 7.00025 7.5C5.89568 7.5 5.00025 6.60457 5.00025 5.5C5.00025 4.747 5.41639 4.09118 6.03124 3.75H5.62525C4.27109 3.75 2.93774 3.41667 1.74289 2.77941L1.41201 2.60294C0.802874 2.27807 0.572432 1.5209 0.897306 0.911767Z" />
            </svg>
        </div>
        <div class="line top"></div>
        <div class="line bottom"></div>
    </div>
</div>

<div id="keyboard">
    <button class="up">
        <svg viewBox="0 0 8 8">
            <path d="M3.99953 1C3.83653 1 3.68353 1.0795 3.59003 1.2135L0.0900328 6.2135C-0.0169672 6.366 -.........完整代码请登录后点击上方下载按钮下载查看