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

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

代码语言：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% .........完整代码请登录后点击上方下载按钮下载查看