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