纯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"] {
.........完整代码请登录后点击上方下载按钮下载查看