纯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(--c9-x: 1) and style(--c9-y: 1) { c > c > c > c > c > c > c > c > c:before { --e9: running; } } @keyframes c9-x { 0%, 0%, 9.0909090909%, to { --c9-x:0; } 0.1%, 8.9909090909% { --c9-x:1; } } @keyframes c9-y { 0%, 80%, 100%, to { --c9-y:0; } 80.1%, 99.9% { --c9-y:1; } } c > c > c > c > c > c > c > c > c > c { animation: c10-x linear, c10-y linear; container-name: c10; } c > c > c > c > c > c > c > c > c > c:before { left: 36.3636363636%; top: 40%; animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e10, paused); } @container c10 style(--c10-x: 1) and style(--c10-y: 1) { c > c > c > c > c > c > c > c > c > c:before { --e10: running; } } @keyframes c10-x { 0%, 36.3636363636%, 45.4545454545%, to { --c10-x:0; } 36.4636363636%, 45.3545454545% { --c10-x:1; } } @keyframes c10-y { 0%, 40%, 60%, to { --c10-y:0; } 40.1%, 59.9% { --c10-y:1; } } c > c > c > c > c > c > c > c > c > c > c { animation: c11-x linear, c11-y linear; container-name: c11; } c > c > c > c > c > c > c > c > c > c > c:before { left: 90.9090909091%; top: 40%; animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e11, paused); } @container c11 style(--c11-x: 1) and style(--c11-y: 1) { c > c > c > c > c > c > c > c > c > c > c:before { --e11: running; } } @keyframes c11-x { 0%, 90.9090909091%, 100%, to { --c11-x:0; } 91.0090909091%, 99.9% { --c11-x:1; } } @keyframes c11-y { 0%, 40%, 60%, to { --c11-y:0; } 40.1%, 59.9% { --c11-y:1; } } c > c > c > c > c > c > c > c > c > c > c > c { animation: c12-x linear, c12-y linear; container-name: c12; } c > c > c > c > c > c > c > c > c > c > c > c:before { left: 36.3636363636%; top: 40%; animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e12, paused); } @container c12 style(--c12-x: 1) and style(--c12-y: 1) { c > c > c > c > c > c > c > c > c > c > c > c:before { --e12: running; } } @keyframes c12-x { 0%, 36.3636363636%, 45.4545454545%, to { --c12-x:0; } 36.4636363636%, 45.3545454545% { --c12-x:1; } } @keyframes c12-y { 0%, 40%, 60%, to { --c12-y:0; } 40.1%, 59.9% { --c12-y:1; } } c > c > c > c > c > c > c > c > c > c > c > c > c { animation: c13-x linear, c13-y linear; container-name: c13; } c > c > c > c > c > c > c > c > c > c > c > c > c:before { left: 36.3636363636%; top: 60%; animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e13, paused); } @container c13 style(--c13-x: 1) and style(--c13-y: 1) { c > c > c > c > c > c > c > c > c > c > c > c > c:before { --e13: running; } } @keyframes c13-x { 0%, 36.3636363636%, 45.4545454545%, to { --c13-x:0; } 36.4636363636%, 45.3545454545% { --c13-x:1; } } @keyframes c13-y { 0%, 60%, 80%, to { --c13-y:0; } 60.1%, 79.9% { --c13-y:1; } } c > c > c > c > c > c > c > c > c > c > c > c > c > c { animation: c14-x linear, c14-y linear; container-name: c14; } c > c > c > c > c > c > c > c > c > c > c > c >.........完整代码请登录后点击上方下载按钮下载查看
网友评论0