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