css实现一个弹珠小游戏效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：css实现一个弹珠小游戏效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&amp;display=swap'>
  
<style>
*, *:before {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #e3e4e8;
	--fg: #17181c;
	font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body, .pa, .pa__ui {
	display: flex;
}
body, button {
	font: 1em/1.5 serif;
}
body {
	background: var(--bg);
	color: var(--fg);
	height: 100vh;
}
.pa {
	background:
		linear-gradient(90deg,#0000 2.4em,#0004 2.4em 2.45em,#0000 2.45em) 0 0 / 2.55em 22em,
		linear-gradient(270deg,#0000 2.4em,#0004 2.4em 2.45em,#0000 2.45em) 100% 0 / 2.55em 22em,
		linear-gradient(0deg,#0000 3em,#0008 3em 3.05em,#0000 3.05em) 50% 0 / 10.1em 100%,
		linear-gradient(0deg,#0000 0.5em,#0004 0.5em 0.55em,#0000 0.55em 2.45em,#0008 2.45em 2.5em,#0000 2.5em 2.95em,#0008 2.95em 3em,#0000 3em),
		#7a4006;
	background-repeat: no-repeat;
	border-radius: 0.25em;
	box-shadow:
		0 0.1em 0 #fff4 inset,
		0.1em 0 #0004 inset,
		-0.1em 0 0 #0004 inset,
		0 -0.1em 0 #0004 inset;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0.75em auto 1.5em auto;
	width: 15em;
	height: 25em;
}
.pa__input {
	position: fixed;
	top: -1.5em;
	left: -1.5em;
}
.pa__playfield, .pa__coin-tray, .pa__lever, .pa__lever-group {
	position: relative;
}
.pa__playfield {
	background:
		linear-gradient(0deg,#abafba00 0.8em,#abafba 0.8em 1.8em,#abafba00 1.8em),
		linear-gradient(67deg,#5eba76 51.75%,#c9b68b 52% 53.75%,#5eba76 54% 55.75%,#55b7f7 56%) 0 0 / 50% 100%,
		linear-gradient(-67deg,#5eba76 51.75%,#c9b68b 52% 53.75%,#5eba76 54% 55.75%,#55b7f7 56%) 100% 0 / 50% 100%,
		#55b7f7;
	background-repeat: no-repeat;
	border-top: 0.2em solid #492704;
	border-right: 0.1em solid #492704;
	border-bottom: 0.4em solid #a17445;
	border-left: 0.1em solid #492704;
	box-shadow:
		0 0.5em 0 #0003 inset,
		0.5em -0.25em 0 #0003 inset;
	width: 10.2em;
	height: 15.5em;
}
.pa__arrow,
.pa__silver-plate,
.pa__brand-plate,
.pa__balls,
.pa__ball,
.pa__ball:before,
.pa__obstacles,
.pa__center1,
.pa__center2,
.pa__center3,
.pa__center3:before,
.pa__center3:after,
.pa__symbol,
.pa__spinner,
.pa__spinner-shadow,
.pa__cup,
.pa__cup:before,
.pa__cup:after,
.pa__mini-cup,
.pa__exit,
.pa__exit:before,
.pa__pin,
.pa__outer-track1,
.pa__outer-track2,
.pa__inner-track,
.pa__pipe,
.pa__launcher,
.pa__launcher:before,
.pa__launcher:after,
.pa__launcher-base,
.pa__launcher-base:before,
.pa__coin-tray:before,
.pa__coin-tray:after,
.pa__lever:before {
	position: absolute;
}
.pa__arrow {
	animation: bounce 1s ease-in-out infinite;
	background: #f4b925;
	clip-path: polygon(67% 0,67% 25%,100% 25%,100% 75%,67% 75%,67% 100%,0% 50%);
	color: #fff;
	top: 19.25em;
	left: calc(50% + 4.25em);
	width: 2em;
	height: 2em;
	transform-origin: 0 50%;
	z-index: 9;
}
.pa__input:last-of-type:not(:checked) + .pa__arrow {
	visibility: hidden;
}
.pa__silver-plate {
	background:
		linear-gradient(#0003 0.4em,#0000 0.4em),
		radial-gradient(0.2em 0.2em at 0.15em 0.15em,#826717 49%,#82671700 50%),
		radial-gradient(0.2em 0.2em at 2.35em 0.15em,#826717 49%,#82671700 50%),
		radial-gradient(0.2em 0.2em at 2.35em 0.6em,#826717 49%,#82671700 50%),
		radial-gradient(0.2em 0.2em at 0.15em 0.6em,#826717 49%,#82671700 50%),
		#454954;
	border-radius: 0.1em;
	box-shadow:
		0 0.05em 0 #2e3138 inset,
		0 -0.05em 0 #e3e4e8 inset;
	top: 0.1em;
	left: 6.5em;
	width: 2.5em;
	height: 0.75em;
}
.pa__brand-plate {
	background:
		radial-gradient(0.1em 0.2em at 0.05em 0.2em,#41340b 49%,#41340b00 50%),
		radial-gradient(0.1em 0.2em at 0.05em 2.8em,#41340b 49%,#41340b00 50%),
		radial-gradient(0.2em 0.2em at 2.05em 0.2em,#c39b22 49%,#c39b2200 50%),
		radial-gradient(0.2em 0.2em at 2.05em 2.8em,#c39b22 49%,#c39b2200 50%),
		repeating-linear-gradient(90deg,#0002 0 0.1em,#0000 0.1em 0.2em) 0.6em 0 / 1em 0.4em,
		repeating-linear-gradient(90deg,#0002 0 0.1em,#0000 0.1em 0.2em) 1.6em 0 / 0.4em 100%,
		#e3e4e8;
	background-repeat: no-repeat;
	border-radius: 0.1em;
	box-shadow:
		0.1em 0 0 #0003 inset,
		0.2em 0.1em 0 #fffa inset,
		0.1em 0.1em 0 0.1em #0003;
	top: 11em;
	left: calc(100% - 0.1em);
	width: 2.25em;
	height: 3em;
	z-index: 3;
}
.pa__brand-plate-inner {
	background:
		radial-gradient(0.5em 0.5em at 40% 50%,#492604 49%,#49260400 50%),
		radial-gradient(0.5em 0.5em at 44% 52%,#e3e4e8 49%,#e3e4e800 50%),
		#454954;
	border-radius: 0.1em;
	box-shadow:
		0 0.1em 0 #0003 inset,
		0 -0.05em 0 #fffa inset,
		0 -0.05em 0 #e3e4e8 inset;
	clip-path: polygon(0 0,100% 0,80% 50%,100% 100%,0 100%);
	margin: 0.4em auto 0.4em auto;
	width: 1em;
	height: 1.5em;
}
.pa__logo {
	color: #17181c;
	font: bold 0.4em/1 Cousine, monospace;
	padding: 0.1rem 0.25rem;
	text-transform: uppercase;
}
.pa__balls, .pa__obstacles {
	overflow: hidden;
}
.pa__balls, .pa__obstacles, .pa__ball:before {
	width: 100%;
	height: 100%;
}
.pa__ball {
	bottom: 0;
	left: 0;
	width: 0.4em;
	height: 0.4em;
	transform: translateX(8.4em);
}
.pa__ball:before {
	background-color: #fff;
	border-radius: 50%;
	box-shadow:
		0.05em -0.05em 0 0.1em #5c6270 inset,
		0.05em 0.05em 0 #0003;
	transform: translateY(0);
}
.pa__obstacles {
	z-index: 2;
}
.pa__spinner, .pa__cup, .pa__mini-cup, .pa__exit, .pa__pin {
	transform: translateX(-50%);
}
.pa__spinner, .pa__spinner-shadow {
	border-radius: 50%;
	width: 0.75em;
	height: 0.75em;
}
.pa__spinner {
	background:
		radial-gradient(100% 100% at center,#ddb43c 7%,#7a4006 8% 12%,#f9f986 13% 24%,#f6a656 25% 29%,#f6a65600 30% 39%,#f9f986 40% 44%,#7a4006 45% 49%,#7a400600 50%),
		linear-gradient(0deg,#f6a65600 45%,#f6a656 45% 55%,#f6a65600 55%),
		linear-gradient(45deg,#f6a65600 45%,#f6a656 45% 55%,#f6a65600 55%),
		linear-gradient(90deg,#f6a65600 45%,#f6a656 45% 55%,#f6a65600 55%),
		linear-gradient(135deg,#f6a65600 45%,#f6a656 45% 55%,#f6a65600 55%);
}
.pa__spinner-shadow {
	background-color: #0003;
	transform: translate(-45%,5%);
}
.pa__spinner--1, .pa__spinner-shadow--1, 
.pa__spinner--2, .pa__spinner-shadow--2 {
	top: 4.5em;
}
.pa__spinner--3, .pa__spinner-shadow--3,
.pa__spinner--4, .pa__spinner-shadow--4,
.pa__spinner--5, .pa__spinner-shadow--5,
.pa__spinner--6, .pa__spinner-shadow--6 {
	top: 6.625em;
}
.pa__spinner--1, .pa__spinner-shadow--1 {
	left: 3em;
}
.pa__spinner--2, .pa__spinner-shadow--2 {
	left: 7em;
}
.pa__spinner--3, .pa__spinner-shadow--3 {
	left: 1.7em;
}
.pa__spinner--4, .pa__spinner-shadow--4 {
	left: 3.6em;
}
.pa__spinner--5, .pa__spinner-shadow--5 {
	left: 6.4em;
}
.pa__spinner--6, .pa__spinner-shadow--6 {
	left: 8.3em;
}
.pa__ball:before,
.pa__center3:before,
.pa__center3:after,
.pa__cup:before,
.pa__cup:after,
.pa__exit:before,
.pa__launcher:before,
.pa__launcher:after,
.pa__launcher-base:before,
.pa__coin-tray:before,
.pa__coin-tray:after,
.pa__lever:before {
	content: "";
	display: block;
}
.pa__cup {
	left: 10em;
	width: 0.7em;
	height: 0.7em;
}
.pa__cup:before {
	background-color: #ddb53b;
	border-radius: 0.1em;
	box-shadow:
		0 -0.05em 0 #c39b22 inset,
		0.05em 0.05em 0 #0003;
	top: 0.1em;
	left: 0;
	width: 0.7em;
	height: 0.2em;
}
.pa__cup:after {
	background: linear-gradient(90deg,#abafba 50%,#8f95a3 50%);
	border-radius: 0 0 0.25em 0.25em;
	box-shadow:
		0.05em 0 0 #e3e4e8 inset,
		0 0.05em 0 #0003;
	left: 0.1em;
	width: 0.5em;
	height: 0.7em;
}
.pa__cup--1, .pa__cup--5 {
	top: 9em;
}
.pa__cup--2, .pa__cup--3, .pa__cup--4 {
	top: 10em;
}
.pa__cup--1 {
	left: 2.1em;
}
.pa__cup--2 {
	left: 3.8em;
}
.pa__cup--3 {
	left: 5em;
}
.pa__cup--4 {
	left: 6.25em;
}
.pa__cup--5 {
	left: 7.9em;
}
.pa__mini-cup {
	background:
		linear-gradient(0deg,#454954 0.05em,#45495400 0.05em),
		linear-gradient(90deg,#454954 0.05em,#5c6270 0.05em 0.35em,#737a8c 0.35em);
	top: 4.2em;
	left: 50%;
	width: 0.4em;
	height: 0.4em;
}
.pa__exit {
	background:
		radial-gradient(0.2em 0.2em at 0.1em 0.1em,#c39b22 49%,#c39b2200 50%),
		radial-gradient(0.2em 0.2em at 1.4em 0.1em,#c39b22 49%,#c39b2200 50%),
		#5c6270;
	border-radius: 0.1em;
	clip-path: polygon(0 0,100% 0,100% 15%,83% 100%,17% 100%,0 15%);
	top: 11em;
	left: 5em;
	width: 1.5em;
	height: 0.9em;
}
.pa__exit:before {
	background-color: #17181c;
	border-radius: 0.2em;
	box-shadow: 0 0.05em 0 #8f95a3 inset;
	top: 0.15em;
	left: 0.3em;
	width: 0.9em;
	height: 0.4em;
}
.pa__pin {
	background-color: #f4e6be;
	border-radius: 50%;
	box-shadow:
		0.05em -0.05em 0 0.05em #ad7e1f inset,
		0.05em 0.05em 0 #0003;
	width: 0.2em;
	height: 0.2em;
}
.pa__pin--1 { top: 3.2em; left: 4.65em; }
.pa__pin--2 { top: 3.2em; left: 5.35em; }
.pa__pin--3 { top: 3.55em; left: 2.4em; }
.pa__pin--4 { top: 3.7em; left: 2.55em; }
.pa__pin--5 { top: 3.9em; left: 2.65em; }
.pa__pin--6 { top: 4.1em; left: 2.7em; }
.pa__pin--7 { top: 4.1em; left: 3.25em; }
.pa__pin--8 { top: 3.9em; left: 3.3em; }
.pa__pin--9 { top: 3.7em; left: 3.4em; }
.pa__pin--10 { top: 3.55em; left: 3.55em; }
.pa__pin--11 { top: 3.9em; left: 4em; }
.pa__pin--12 { top: 3.7em; left: 4.1em; }
.pa__pin--13 { top: 3.55em; left: 4.25em; }
.pa__pin--14 { top: 3.9em; left: 6em; }
.pa__pin--15 { top: 3.7em; left: 5.9em; }
.pa__pin--16 { top: 3.55em; left: 5.75em; }
.pa__pin--17 { top: 3.55em; left: 6.45em; }
.pa__pin--18 { top: 3.7em; left: 6.6em; }
.pa__pin--19 { top: 3.9em; left: 6.7em; }
.pa__pin--20 { top: 4.1em; left: 6.75em; }
.pa__pin--21 { top: 3.55em; left: 7.6em; }
.pa__pin--22 { top: 3.7em; left: 7.45em; }
.pa__pin--23 { top: 3.9em; left: 7.35em; }
.pa__pin--24 { top: 4.1em; left: 7.3em; }
.pa__pin--31 { top: 4.1em; left: 1.6em; }
.pa__pin--32 { top: 4.1em; left: 2.15em; }
.pa__pin--33 { top: 4.7em; left: 1.3em; }
.pa__pin--34 { top: 4.7em; left: 1.85em; }
.pa__pin--35 { top: 5.3em; left: 1.05em; }
.pa__pin--36 { top: 5.3em; left: 1.6em; }
.pa__pin--37 { top: 5.3em; left: 2.15em; }
.pa__pin--38 { top: 5.9em; left: 1.6em; }
.pa__pin--39 { top: 5.9em; left: 0.9em; }
.pa__pin--40 { top: 6.1em; left: 1.05em; }
.pa__pin--41 { top: 6.3em; left: 1.2em; }
.pa__pin--42 { top: 5.9em; left: 2.35em; }
.pa__pin--43 { top: 6.1em; left: 2.2em; }
.pa__pin--44 { top: 6.3em; left: 2.05em; }
.pa__pin--45 { top: 5.9em; left: 2.9em; }
.pa__pin--46 { top: 6.1em; left: 3.05em; }
.pa__pin--47 { top: 6.3em; left: 3.2em; }
.pa__pin--48 { top: 6.6em; left: 2.65em; }
.pa__pin--49 { top: 7.1em; left: 2.35em; }
.pa__pin--50 { top: 7.1em; left: 2.95em; }
.pa__pin--51 { top: 7.75em; left: 1.05em; }
.pa__pin--52 { top: 7.75em; left: 1.6em; }
.pa__pin--53 { top: 7.75em; left: 2.15em; }
.pa__pin--54 { top: 8.35em; left: 1.3em; }
.pa__pin--55 { top: 8.35em; left: 1.85em; }
.pa__pin--56 { top: 8.35em; left: 2.4em; }
.pa__pin--57 { top: 4.1em; left: 8.4em; }
.pa__pin--58 { top: 4.1em; left: 7.85em; }
.pa__pin--59 { top: 4.7em; left: 8.7em; }
.pa__pin--60 { top: 4.7em; left: 8.15em; }
.pa__pin--61 { top: 5.3em; left: 8.95em; }
.pa__pin--62 { top: 5.3em; left: 8.4em; }
.pa__pin--63 { top: 5.3em; left: 7.85em; }
.pa__pin--64 { top: 5.9em; left: 8.4em; }
.pa__pin--65 { top: 5.9em; left: 9.1em; }
.pa__pin--66 { top: 6.1em; left: 8.95em; }
.pa__pin--67 { top: 6.3em; left: 8.8em; }
.pa__pin--68 { top: 5.9em; left: 7.65em; }
.pa__pin--69 { top: 6.1em; left: 7.8em; }
.pa__pin--70 { top: 6.3em; left: 7.95em; }
.pa__pin--71 { top: 5.9em; left: 7.1em; }
.pa__pin--72 { top: 6.1em; left: 6.95em; }
.pa__pin--73 { top: 6.3em; left: 6.8em; }
.pa__pin--74 { top: 6.6em; left: 7.35em; }
.pa__pin--75 { top: 7.1em; left: 7.65em; }
.pa__pin--76 { top: 7.1em; left: 7.05em; }
.pa__pin--77 { top: 7.75em; left: 8.95em; }
.pa__pin--78 { top: 7.75em; left: 8.4em; }
.pa__pin--79 { top: 7.75em; left: 7.85em; }
.pa__pin--80 { top: 8.35em; left: 8.7em; }
.pa__pin--81 { top: 8.35em; left: 8.15em; }
.pa__pin--82 { top: 8.35em; left: 7.6em; }
.pa__pin--83 { top: 3.9em; left: 4.65em; }
.pa__pin--84 { top: 4.1em; left: 4.5em; }
.pa__pin--85 { top: 4.3em; left: 4.35em; }
.pa__pin--86 { top: 3.9em; left: 5.35em; }
.pa__pin--87 { top: 4.1em; left: 5.5em; }
.pa__pin--88 { top: 4.3em; left: 5.65em; }
.pa__pin--89 { top: 5em; left: 4em; }
.pa__pin--90 { top: 5.6em; left: 3.75em; }
.pa__pin--91 { top: 6.2em; le.........完整代码请登录后点击上方下载按钮下载查看