纯CSS重返德军游戏

下载代码

html

css

分享到微信朋友圈

html

w<body class="">
<input type="button" accesskey="a" id="left">
<input type="button" accesskey="q" id="turnleft">
<input type="button" accesskey="w" id="forwards">
<input type="button" accesskey="s" id="backwards">
<input type="button" accesskey="d" id="right">
<input type="button" accesskey="e" id="turnright">

css

body{
  margin:0;
  background:#000;
  font-size:16px;
}

label{
  color:#fff;
}

[type="button"],
[type="radio"]{
  display:none;
}

.controls{
  position:absolute;
  z-index: 10;
  top:0;
  left:0;
  height:8em;
  width:8em;
  border-radius:50%;
  background:rgba(0,0,0,0.5);
  user-select: none;
}
.button{
  position:absolute;
  height:2em;
  width:2em;
  line-height:2em;
  text-align:center;
  background:grey;
}
.button.forwards,
.button.backwards{
  transform:rotate(-90deg);
}
.button.forwards{
  top:0;
  left:3em;
}
.button.backwards{
  bottom:0;
  left:3em;
}
.button.left{
  top:3em;;
  left:0;
}
.button.right{
  top:3em;
  right:0;
}
.button.turnleft{
  top:0em;
  left:0;
}
.button.turnright{
  top:0em;
  right:0;
}

.controlsLeft,
.controlsRight{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:-1;
  animation-timing-function: linear;
  animation-duration: 20s;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.controlsLeft{
  animation-name:controlsLeft;
}
#turnleft:active ~* .controlsLeft{
  animation-play-state: running;
}
@keyframes controlsLeft{
  100%{
    transform:rotate(3600deg);
  }
}

.controlsRight{
  animation-name:controlsRight;
}
#turnright:active ~* .controlsRight{
  animation-play-state: running;
}
@keyframes controlsRight{
  100%{
    transform:rotate(-3600deg);
  }
}

.move{
  transform-style: preserve-3d;
  transition:transform 1s;
}
.scene{
  transform: translateY(18em);
}

.move{
  animation-timing-function: linear;
  animation-duration: 20s;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.walkF{
  animation-name:forward;
}
#forwards:active ~* .walkF{
  animation-play-state: running;
}
@keyframes forward{
  100%{
    transform:translateZ(280em);
  }
}

.walkB{
  animation-name:backwards;
}
#backwards:active ~* .walkB{
  animation-play-state: running;
}
@keyframes backwards{
  100%{
    transform:translateZ(-280em);
  }
}

.walkL{
  animation-name:walkLeft;
}
#left:active ~* .walkL{
  animation-play-state: running;
}
@keyframes walkLeft{
  100%{
    transform:translateX(280em);
  }
}

.walkR{
  animation-name:walkRight;
}
#right:active ~* .walkR{
  animation-play-state: running;
}
@keyframes walkRight{
  100%{
    transform:translateX(-280em);
  }
}

.rotateR{
  animation-name:right;
}
#turnright:active ~* .rotateR{
  animation-play-state: running;
}
@keyframes right{
  100%{
    transform:rotateY(3600deg);
  }
}

.rotateL{
  animation-name:left;
}
#turnleft:active ~* .rotateL{
  animation-play-state: running;
}
@keyframes left{
  100%{
    transform:rotateY(-3600deg);
  }
}

.rotateL,
.rotateR{
/* This isn't working on safari */
  transform-origin:25em 0em 50em;
}

.rt{
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Grey10.bmp) left/auto 100%;
}
.lt,
.ft,
.bk{
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Grey9.bmp) left/auto 100%;
}

.bm{
  background:#707070 !important;
}
.tp{
  background:#383838 !important;
}
.transparent{
  background:transparent !important;
}

.gun{
  position:absolute;
  height:15em;
  width:13em;
  left:18em;
  bottom:0;
  z-index:1;
  overflow:hidden;
}
.gun::after{
  content:'';
  position: absolute;
  width:500%;
  height:100%;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/wolf-gun.gif)0% 0%/cover repeat-x;
  transition:transform .5s steps(4, end);
  transform: translateX(-80%);
  transition-delay:0s;
}
#tridiv:active .gun::after{
  transform: translateX(-0%);
  transition:none;
  transition-delay:.5s;
}
/* Can shoot through divs */
.shape{
  pointer-events:none;
}
/* But can't shoot through walls */
.face{
  pointer-events:auto;
}

.guard{
  display: block;
  position:relative;
  height: 20em;
  width: 20em;
  overflow:hidden;
  transform: translate3d(65em,30em,10em) rotateY(-90deg);
  clear:both;
  float:left;
}
#guard:checked ~ * .guard{
  pointer-events:none;
}
.guard::after{
  content:'';
  position: absolute;
  width:500%;
  height:100%;
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/guard.gif);
  background-size:cover;
  background-position: 0em -20em;
  animation:guard 1s steps(1, start) infinite;
}
#guard:checked ~ * .guard::after{
  background-position: 0em 40em;
  animation:guard-dead 1s steps(4, start) 1 forwards;
}
@keyframes guard{
  0%,50%{
    transform:translateX(0);
  }
  75%{
    transform:translateX(-20em);
  }
  100%{
    transform:translateX(-40em);
  }
}
@keyframes guard-dead{
  100%{
    transform:translateX(-80em);
  }
}

.boss{
  display: block;
  position:relative;
  height: 20em;
  width: 20em;
  overflow:hidden;
  transform: translate3d(80em,10em,-30em);
  clear:both;
  float:left;
  animation:boss-walk 8s infinite linear;
}
@keyframes boss-walk{
  0%{transform: translate3d(80em,10em,-30em);}
  20%{transform: translate3d(80em,10em,-20em);}
  50%{transform: translate3d(80em,10em,-20em);}
  75%{transform: translate3d(80em,10em,-30em);}
}
#boss:checked ~ * .boss{
  pointer-events:none;
  animation-play-state:paused;
}
.boss::after{
  content:'';
  position: absolute;
  bottom:0;
  left:0;
  width:400%;
  height:300%;
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/boss.png);
  background-size:cover;
  animation:boss 4s steps(1, start) infinite;
}
#boss:checked ~ * .boss::after{
  animation:boss-dead 1s steps(3, start) 1 forwards;
}
@keyframes boss{
  0%{transform:translateX(0%);}
  6.25%{transform:translateX(-25%);}
  12.5%{transform:translateX(-50%);}
  18.25%{transform:translateX(-75%);}
  25%{transform:translateX(0%);}
  31.25%{transform:translateX(-25%);}
  37.5%{transform:translateX(-50%);}
  43.75%{transform:translateX(-75%);}
  50%{transform:translate(0%,20em);}
  56.25%{transform:translate(-25%,20em);}
  62.5%{transform:translate(-50%,20em);}
  68.75%{transform:translate(-75%,20em);}
  75%{transform:translate(0%,20em);}
  81.25%{transform:translate(-25%,20em);}
  87.5%{transform:translate(-50%,20em);}
  93.75%{transform:translate(-75%,20em);}
}
@keyframes boss-dead{
  0%{transform:translate(0%,40em)}
  100%{transform:translate(-75%,40em)}
}

/* Add .Singleton to target Applemail 10 */
.Singleton .rotateL{
  transform-origin:25em 0em 0em;
}
.Singleton .rotateR{
  transform-origin:25em 0em 50em;
} 
.Singleton .safariFix{
  transform: translateZ(50em);
  transform-style: preserve-3d;
}
.Singleton .Appleguard,
.Singleton .Appleboss{
  position:absolute;
  display:block;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.Singleton .Appleguard{transform:translateZ(18em);}
.Singleton .Appleboss{transform:translateZ(19em);}

.Singleton #guard:checked ~ * .Appleguard,
.Singleton #boss:checked ~ * .Appleboss{
  display:none;
}
.Singleton .gun{
  transform:translateX(.5em)translateY(-9em)translateZ(40em)scale(.2);
}

#tridiv {
  perspective: 50em;
  position: relative;
  overflow: hidden;
  margin:0 auto;
  width: 50em;
  height: 37.5em;
  background: transparent;
  font-size: 100%;
  outline:.25em darkred solid;
}
.scene, .shape, .face, .face-wrapper{
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: visible;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
/* .cub-4 styles */
.cub-4 {
  transform:translate3D(0em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-4 .ft {
  transform:translateZ(10em);
}
.cub-4 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-4 .rt, .cub-4 .lt {
  width:20em;
  height:20em;
}
.cub-4 .tp, .cub-4 .bm {
  width:20em;
  height:20em;
}

/* .cub-5 styles */
.cub-5 {
  transform:translate3D(0em, 0em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-5 .ft {
  transform:translateZ(10em);
}
.cub-5 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-5 .rt, .cub-5 .lt {
  width:20em;
  height:20em;
}
.cub-5 .tp, .cub-5 .bm {
  width:20em;
  height:20em;
}

.cub-5 .ft {
  width:20em;
  margin-left:0em;
}
.cub-5 .bk {
  width:20em;
  margin-left:0em;
}
.cub-5 .rt, .cub-5 .lt {
  width:20em;
}
.cub-5 .tp, .cub-5 .bm, .cub-5 .tp .photon-shader, .cub-5 .bm .photon-shader {
  border-radius:0em;
}
.cub-5 .side {
  width:0.025em;
}
/* .cub-6 styles */
.cub-6 {
  transform:translate3D(25em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:30em;
  height:20em;
  margin:-10em 0 0 -15em;
}
.cub-6 .ft {
  transform:translateZ(10em);
}
.cub-6 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-6 .rt, .cub-6 .lt {
  width:20em;
  height:20em;
}
.cub-6 .tp, .cub-6 .bm {
  width:30em;
  height:20em;
}

/* .cub-7 styles */
.cub-7 {
  transform:translate3D(50em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-7 .ft {
  transform:translateZ(10em);
}
.cub-7 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-7 .rt, .cub-7 .lt {
  width:20em;
  height:20em;
}
.cub-7 .tp, .cub-7 .bm {
  width:20em;
  height:20em;
}

.cub-7 .ft {
  width:20em;
  margin-left:0em;
}
.cub-7 .bk {
  width:20em;
  margin-left:0em;
}
.cub-7 .rt, .cub-7 .lt {
  width:20em;
}
.cub-7 .tp, .cub-7 .bm, .cub-7 .tp .photon-shader, .cub-7 .bm .photon-shader {
  border-radius:0em;
}

.cub-7 .side {
  width:0.025em;
}
/* .cub-8 styles */
.cub-8 {
  transform:translate3D(50em, 0em, -20em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-8 .ft {
  transform:translateZ(20em);
}
.cub-8 .bk {
  transform:translateZ(-20em) rotateY(180deg);
}
.cub-8 .rt, .cub-8 .lt {
  width:40em;
  height:20em;
}
.cub-8 .tp, .cub-8 .bm {
  width:20em;
  height:40em;
}
.cub-8 .ft {
  width:20em;
  margin-left:0em;
}
.cub-8 .bk {
  width:20em;
  margin-left:0em;
}
.cub-8 .rt, .cub-8 .lt {
  width:40em;
}
.cub-8 .tp, .cub-8 .bm, .cub-8 .tp .photon-shader, .cub-8 .bm .photon-shader {
  border-radius:0em;
}

.cub-8 .side {
  width:0.025em;
}

@media screen and (max-width:500px){
  body{
    font-size:2vw;
  }
  #tridiv {
    width: 100%;
  }
  .controls{
    font-size:14px;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg