纯css实现一个搭台子过河探宝小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：纯css实现一个搭台子过河探宝小游戏代码，移动鼠标到左侧台子上，跟随台子的方向移动鼠标，让鼠标始终在台子上，防止落水，一直抵达终点就过关了。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Teko:700" rel="stylesheet">


  
  
<style>
.level {
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 600ms cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  transform: translateY(-20rem) translateX(20rem);
  pointer-events: none;
}
.level[l="1"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) translateX(0);
}
.level:hover .finish {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms linear;
}

input {
  opacity: 0;
  pointer-events: none;
}

input:checked + .level + input + .level {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) translateX(0);
}

input:checked + .level {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20rem) translateX(-20rem) !important;
}

.button, .goal {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 75%;
  height: 75%;
  border-radius: 10rem;
  background: #ebc247;
  text-align: center;
  line-height: 8rem;
  box-shadow: -0.5rem 0.5rem 0.5rem #7a8ab8;
  transition: box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}
.button:hover, .goal:hover {
  transform: translateX(0.5rem) translateY(-0.5rem);
  box-shadow: -2rem 2rem 3rem #7a8ab8;
}
.button:active, .goal:active {
  transform: translateX(-0.5rem) translateY(0.5rem);
  box-shadow: 0rem 0rem 0rem #7a8ab8;
}

.button {
  background: #c4bddb;
}

input:checked + .button {
  pointer-events: none;
  transform: translateX(-0.5rem) translateY(0.5rem);
  box-shadow: 0rem 0rem 0rem #7a8ab8;
}

#level-one {
  position: absolute;
  z-index: 10000;
}

.step {
  width: 10.1rem;
  height: 10.1rem;
  background: #c4bddb;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(5rem) translateX(-5rem);
  pointer-events: none;
  transition: transform 600ms cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity 600ms linear;
}
.step:before, .step:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
}
.step:before {
  left: -20%;
  background: #5993a6;
  transform-origin: 100% 100%;
  transform: skewy(-45deg);
  width: 20%;
}
.step:after {
  top: 100%;
  background: #7a8ab8;
  transform-origin: 0% 0%;
  transform: skewX(-45deg);
  height: 20%;
}
.step.start:before, .step.finish:before {
  left: -50%;
  width: 50%;
}
.step.start:after, .step.finish:after {
  height: 50%;
}
.step.start, .step:hover, .step:hover + .step, .step:hover + .path > .step:first-child, .step:hover + .path + .step, .step:hover + .bridge > input:checked + .step, .step:hover + .bridge > input:not(:checked) + .step + .step {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms linear;
}
.step[r="1"] {
  top: 10rem;
}
.step[r="2"] {
  top: 20rem;
}
.step[r="3"] {
  top: 30rem;
}
.step[r="4"] {
  top: 40rem;
}
.step[c="1"] {
  left: 10rem;
}
.step[c="2"] {
  left: 20rem;
}
.step[c="3"] {
  left: 30rem;
}
.step[c="4"] {
  left: 40rem;
}
.step[c="0"][r="0"] {
  z-index: 5;
}
.step[c="1"][r="0"] {
  z-index: 4;
}
.step[c="2"][r="0"] {
  z-index: 3;
}
.step[c="3"][r="0"] {
  z-index: 2;
}
.step[c="4"][r="0"] {
  z-index: 1;
}
.step[c="0"][r="1"] {
  z-index: 10;
}
.step[c="1"][r="1"] {
  z-index: 8;
}
.step[c="2"][r="1"] {
  z-index: 6;
}
.step[c="3"][r="1"] {
  z-index: 4;
}
.step[c="4"][r="1"] {
  z-index: 2;
}
.step[c="0"][r="2"] {
  z-index: 15;
}
.step[c="1"][r="2"] {
  z-index: 12;
}
.step[c="2"][r="2"] {
  z-index: 9;
}
.step[c="3"][r="2"] {
  z-index: 6;
}
.step[c="4"][r="2"] {
  z-index: 3;
}
.step[c="0"][r="3"] {
  z-index: 20;
}
.step[c="1"][r="3"] {
  z-index: 16;
}
.step[c="2"][r="3"] {
  z-index: 12;
}
.step[c="3"][r="3"] {
  z-index: 8;
}
.step[c="4"][r="3"] {
  z-index: 4;
}
.step[c="0"][r="4"] {
  z-index: 25;
}
.step[c="1"][r="4"] {
  z-index: 20;
}
.step[c="2"][r="4"] {
  z-index: 15;
}
.step[c="3"][r="4"] {
  z-index: 10;
}
.step[c="4"][r="4"] {
  z-index: 5;
}

.bridge {
  pointer-events: none;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 50rem;
  transform: perspective(100rem) translate3d(-50%, -50%, 0) rotateZ(-45deg);
}

html {
  font-size: 1.2vh;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #478575;
  color: white;
  font-size: 2rem;
  font-family: "Source Sans Pro", sans-serif;
}

h1 {
  font-size: 10rem;
  margin: 0;
  font-family: "Teko", sans-serif;
}

p {
  margin-top: 0;
}

.share {
  display: inline-block;
  margin-top: 2rem;
  text-decoration: none;
  padding: 2rem;
  border-radius: 5rem;
  background: #ebc247;
  font-family: "Teko", sans-serif;
  color: #366358;
  box-shadow: -0.5rem 0.5rem 0.5rem #366358;
  transition: box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}
.share:hover {
  transform: translateX(1rem) translateY(-1rem);
  box-shadow: -1.5rem 1.5rem 2.5rem #366358;
}
.share:active {
  transform: translateX(-0.5rem) translateY(0.5rem);
  box-shadow: 0rem 0rem 0rem #366358;
}

.message {
  transform: rotate(45deg) translatey(-10rem);
  text-align: center;
  width: 40rem;
}

.sig {
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
}
</style>



</head>

<body >
  <div class="center">
  <input id="level-one" type="checkbox"/>
  <div class="level" l="1">
    <div class="step start" r="0" c="0"></div>
    <div class="step" r="0" c="1"></div>
    <div class="step" r="1" c="1"></div>
    <div class="step" r="2" c="1"></div>
    <div class="step" r="3" c="1"></div>
    <div class="step" r="3" c="2"></div>
    <div class="step" r="3" c="3"></div>
    <div class="step" r="2" c="3"></div>
    <div class="step" r="2" c="4"></div>
    <div class="step" r="3" c="4"></div>
    <div class="step finish" r="4" c="4">
      <label class="goal" for="level-one"></label>
    </div>
  </div>
  <input id="level-two" type="checkbox"/>
  <div class="level">
    <div class="step start" r="4" c="4"></div>
    <div class="step" r="4" c="3"></div>
    <div class="step" r="4" c="2"></div>
    <div class="step" r="3" c="2"></div>
    <div class="step" r="3" c="1"></div>
    <div class="step" r="3" c="0"></div>
    <div class="step" r="4" c="0"></div>
    <div class="step" r="4" c="1"></div>
    <div class="step" r="3" c="1"></div>
    <div class="step" r="3" c="2"></div>
    <div class="step" r="3" c="3"></div>
    <div class="step" r="4" c="3"></div>
    <div class="step" r="4" c="2"></div>
    <div class="step" r="3" c="2"></div>
    <div class="step" r="3" c="1"></div>
    <div class="step" r="4" c="1"></div>
    <div class="step" r="4" c="0"></div>
    <div class="step" r="3" c="0"></div>
    <div class="step" r="2" c="0"></div>
    <div class="step" r="1" c="0"></div>
    <div class="step finish" r="1" c="1">
      <label class="goal" for="level-two"></label>
    </div>
  </div>
  <input id="level-three" type="checkbox"/>
  <div class="level">
    <div class="step start" r="1" c="1"></div>
    <div class="step" r="1" c="2"></div>
    <div class="step" r="1" c="3"></div>
    <div class="path">
      <div class="step" r="1" c="4"></div>
      <div class="step" r="0" c="4"></div>
      <div class="step" r="0" c="3"></div>
      <div class="step" r="1" c="3"></div>
      <div class="step" r="2" c="3"></div>
      <div class="step" r="3" c="3"></div>
      <div class="step" r="4" c="3"></div>
      <div class="step" r="4" c="4"></div>
    </div>
    <div class="step" r="2" c="3"></div>
    <div class="step" r="3" c="3"></div>
    <div class="step" r="3" c="2"></div>
    <div class="step" r="3" c="1"></div>
    <div class="step" r="3" c="0"></div>
    <div class="step" r="2" c="0"></div>
    <div class="step" r="1" c="0"></div>
    <div class="step finish" r="0" c="0">
      <label class="goal" for="level-three"></label>
    </div>
  </div>
  <input id="level-four" type="checkbox"/>
  <div class="level">
    <div class="step start" r="0" c="0"></div>
    <div class="path">
      <div class="step" r="0" c="1"></div>
      <div class="step" r="0" c="2"></div>
      <div class="path">
        <div class="step" r="1" c="2"></div>
        <div class="step" r="2" c="2"></div>
        <div class="step" r="3" c="2"></div>
        <div class="path">
          <div class="step" r="3" c="3"></div>
          <div class="step" r="2" c="3"></div>
          <div class="step" r="1" c="3"></div>
          <div class="step" r="1" c="4"></div>
          <div class="step" r="2" c="4"></div>
        </div>
        <div class="step" r="3" c="1"></div>
        <div class="step" r="3" c="0"></div>
        <div class="step" r="2" c="0"></div>
        <div class="step" r="2" c="1"></div>
  .........完整代码请登录后点击上方下载按钮下载查看