纯css实现一个简单的超级玛丽小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：纯css实现一个简单的超级玛丽小游戏代码，纯粹的css代码编写，无js代码。

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
@charset "UTF-8";

@import url("https://fonts.cdnfonts.com/css/retro-mario");
@property --s1 {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --s2 {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --sum {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --ee {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
b {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 720px;
  height: 420px;
  position: sticky;
  border: solid #0000;
  border-width: 30px 30px 90px;
  box-sizing: border-box;
  left: 0;
  top: 0;
  font-weight: initial;
}

m {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: 60px;
  aspect-ratio: 1;
  opacity: 0;
  background: url(//repo.bfw.wiki/bfwrepo/images/cssgame/mm.png) center/cover;
  animation: x linear, y linear;
  animation-timeline: scroll(nearest inline), scroll(nearest block);
}

@keyframes x {
  to {
    left: 100%;
  }
}
@keyframes y {
  to {
    top: 100%;
  }
}
c, e {
  position: absolute;
  inset: 0;
  animation-timeline: scroll(nearest inline), scroll(nearest block) !important;
}

:is(c,e):before {
  content: "";
  position: absolute;
  width: 9.0909090909%;
  aspect-ratio: 1;
  scale: 0.6;
  background: url(//repo.bfw.wiki/bfwrepo/images/cssgame/ccc.png) 0 50%/600% auto no-repeat;
}

e:before {
  scale: 0.8;
  animation: g 0.4s steps(2) infinite;
  background: url(//repo.bfw.wiki/bfwrepo/images/cssgame/goomba_1.png) 0 50%/200% auto no-repeat;
}

@keyframes b {
  to {
    background-position: 120% 50%;
  }
}
@keyframes g {
  to {
    background-position: 200% 50%;
  }
}
@keyframes e {
  to {
    opacity: 0;
    translate: 0 -100%;
  }
}
c {
  animation: c1-x linear, c1-y linear;
  container-name: c1;
}

c:before {
  left: 54.5454545455%;
  top: 0%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e1, paused);
}
@container c1 style(--c1-x: 1) and style(--c1-y: 1) {
  c:before {
    --e1: running;
  }
}

@keyframes c1-x {
  0%, 54.5454545455%, 63.6363636364%, to {
    --c1-x:0;
  }
  54.6454545455%, 63.5363636364% {
    --c1-x:1;
  }
}
@keyframes c1-y {
  0%, 0%, 20%, to {
    --c1-y:0;
  }
  0.1%, 19.9% {
    --c1-y:1;
  }
}
c > c {
  animation: c2-x linear, c2-y linear;
  container-name: c2;
}

c > c:before {
  left: 72.7272727273%;
  top: 60%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e2, paused);
}
@container c2 style(--c2-x: 1) and style(--c2-y: 1) {
  c > c:before {
    --e2: running;
  }
}

@keyframes c2-x {
  0%, 72.7272727273%, 81.8181818182%, to {
    --c2-x:0;
  }
  72.8272727273%, 81.7181818182% {
    --c2-x:1;
  }
}
@keyframes c2-y {
  0%, 60%, 80%, to {
    --c2-y:0;
  }
  60.1%, 79.9% {
    --c2-y:1;
  }
}
c > c > c {
  animation: c3-x linear, c3-y linear;
  container-name: c3;
}

c > c > c:before {
  left: 18.1818181818%;
  top: 20%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e3, paused);
}
@container c3 style(--c3-x: 1) and style(--c3-y: 1) {
  c > c > c:before {
    --e3: running;
  }
}

@keyframes c3-x {
  0%, 18.1818181818%, 27.2727272727%, to {
    --c3-x:0;
  }
  18.2818181818%, 27.1727272727% {
    --c3-x:1;
  }
}
@keyframes c3-y {
  0%, 20%, 40%, to {
    --c3-y:0;
  }
  20.1%, 39.9% {
    --c3-y:1;
  }
}
c > c > c > c {
  animation: c4-x linear, c4-y linear;
  container-name: c4;
}

c > c > c > c:before {
  left: 18.1818181818%;
  top: 20%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e4, paused);
}
@container c4 style(--c4-x: 1) and style(--c4-y: 1) {
  c > c > c > c:before {
    --e4: running;
  }
}

@keyframes c4-x {
  0%, 18.1818181818%, 27.2727272727%, to {
    --c4-x:0;
  }
  18.2818181818%, 27.1727272727% {
    --c4-x:1;
  }
}
@keyframes c4-y {
  0%, 20%, 40%, to {
    --c4-y:0;
  }
  20.1%, 39.9% {
    --c4-y:1;
  }
}
c > c > c > c > c {
  animation: c5-x linear, c5-y linear;
  container-name: c5;
}

c > c > c > c > c:before {
  left: 36.3636363636%;
  top: 60%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e5, paused);
}
@container c5 style(--c5-x: 1) and style(--c5-y: 1) {
  c > c > c > c > c:before {
    --e5: running;
  }
}

@keyframes c5-x {
  0%, 36.3636363636%, 45.4545454545%, to {
    --c5-x:0;
  }
  36.4636363636%, 45.3545454545% {
    --c5-x:1;
  }
}
@keyframes c5-y {
  0%, 60%, 80%, to {
    --c5-y:0;
  }
  60.1%, 79.9% {
    --c5-y:1;
  }
}
c > c > c > c > c > c {
  animation: c6-x linear, c6-y linear;
  container-name: c6;
}

c > c > c > c > c > c:before {
  left: 36.3636363636%;
  top: 20%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e6, paused);
}
@container c6 style(--c6-x: 1) and style(--c6-y: 1) {
  c > c > c > c > c > c:before {
    --e6: running;
  }
}

@keyframes c6-x {
  0%, 36.3636363636%, 45.4545454545%, to {
    --c6-x:0;
  }
  36.4636363636%, 45.3545454545% {
    --c6-x:1;
  }
}
@keyframes c6-y {
  0%, 20%, 40%, to {
    --c6-y:0;
  }
  20.1%, 39.9% {
    --c6-y:1;
  }
}
c > c > c > c > c > c > c {
  animation: c7-x linear, c7-y linear;
  container-name: c7;
}

c > c > c > c > c > c > c:before {
  left: 18.1818181818%;
  top: 20%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e7, paused);
}
@container c7 style(--c7-x: 1) and style(--c7-y: 1) {
  c > c > c > c > c > c > c:before {
    --e7: running;
  }
}

@keyframes c7-x {
  0%, 18.1818181818%, 27.2727272727%, to {
    --c7-x:0;
  }
  18.2818181818%, 27.1727272727% {
    --c7-x:1;
  }
}
@keyframes c7-y {
  0%, 20%, 40%, to {
    --c7-y:0;
  }
  20.1%, 39.9% {
    --c7-y:1;
  }
}
c > c > c > c > c > c > c > c {
  animation: c8-x linear, c8-y linear;
  container-name: c8;
}

c > c > c > c > c > c > c > c:before {
  left: 72.7272727273%;
  top: 40%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e8, paused);
}
@container c8 style(--c8-x: 1) and style(--c8-y: 1) {
  c > c > c > c > c > c > c > c:before {
    --e8: running;
  }
}

@keyframes c8-x {
  0%, 72.7272727273%, 81.8181818182%, to {
    --c8-x:0;
  }
  72.8272727273%, 81.7181818182% {
    --c8-x:1;
  }
}
@keyframes c8-y {
  0%, 40%, 60%, to {
    --c8-y:0;
  }
  40.1%, 59.9% {
    --c8-y:1;
  }
}
c > c > c > c > c > c > c > c > c {
  animation: c9-x linear, c9-y linear;
  container-name: c9;
}

c > c > c > c > c > c > c > c > c:before {
  left: 0%;
  top: 80%;
  animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e9, paused);
}
@container c9 style(--.........完整代码请登录后点击上方下载按钮下载查看