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