css实现一个弹珠小游戏效果代码
代码语言：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&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; left: 3.75em; }
.pa__pin--92 { top: 5em; left: 6em; }
.pa__pin--93 { top: 5.6em; left: 6.25em; }
.pa__pin--94 { top: 6.2em; left: 6.25em; }
.pa__pin--95 { top: 8.35em; left: 2.95em; }
.pa__pin--96 { top: 8.55em; left: 2.95em; }
.pa__pin--97 { top: 8.75em; left: 2.95em; }
.pa__pin--98 { top: 8.95em; left: 2.9em; }
.pa__pin--99 { top: 9.15em; left: 2.8em; }
.pa__pin--100 { top: 8.35em; left: 3.5em }
.pa__pin--101 { top: 8.95em; left: 3.5em; }
.pa__pin--102 { top: 9.15em; left: 3.45em; }
.pa__pin--103 { top: 9.35em; left: 3.35em; }
.pa__pin--104 { top: 8.35em; left: 4.05em; }
.pa__pin--105 { top: 8.95em; left: 4.05em; }
.pa__pin--106 { top: 9.15em; left: 4.1em; }
.pa__pin--107 { top: 9.35em; left: 4.2em; }
.pa__pin--108 { top: 8.35em; left: 4.6em; }
.pa__pin--109 { top: 8.55em; left: 4.6em; }
.pa__pin--110 { top: 8.75em; left: 4.6em; }
.pa__pin--111 { top: 8.35em; left: 7.05em; }
.pa__pin--112 { top: 8.55em; left: 7.05em; }
.pa__pin--113 { top: 8.75em; left: 7.05em; }
.pa__pin--114 { top: 8.95em; left: 7.1em; }
.pa__pin--115 { top: 9.15em; left: 7.2em; }
.pa__pin--116 { top: 8.35em; left: 6.5em; }
.pa__pin--117 { top: 8.95em; left: 6.5em; }
.pa__pin--118 { top: 9.15em; left: 6.55em; }
.pa__pin--119 { top: 9.35em; left: 6.65em; }
.pa__pin--120 { top: 8.35em; left: 5.95em; }
.pa__pin--121 { top: 8.95em; left: 5.95em; }
.pa__pin--122 { top: 9.15em; left: 5.9em; }
.pa__pin--123 { top: 9.35em; left: 5.8em; }
.pa__pin--124 { top: 8.35em; left: 5.4em; }
.pa__pin--125 { top: 8.55em; left: 5.4em; }
.pa__pin--126 { top: 8.75em; left: 5.4em; }
.pa__pin--127 { top: 9.15em; left: 5em; }
.pa__pin--128 { top: 9.75em; left: 4.6em; }
.pa__pin--129 { top: 9.75em; left: 5.4em; }
.pa__outer-track1,
.pa__outer-track2,
.pa__inner-track {
border-radius: 50%;
}
.pa__outer-track1,
.pa__inner-track {
border-right: 0.1em solid #737a8c;
border-left: 0.1em solid #737a8c;
}
.pa__outer-track2,
.pa__inner-track {
border-bottom: 0.1em solid #737a8c;
}
.pa__outer-track1 {
border-top: 0.1em solid #737a8c;
border-bottom: 0.1em solid #0000;
filter: drop-shadow(0.05em 0.05em 0 #0003);
top: 2em;
left: 0;
width: 10em;
height: 10em;
transform: scaleY(1.1) rotate(45deg);
}
.pa__outer-track2 {
border-radius: 100% 0% 0% 100% / 0% 100% 0% 100%;
border-left: 0.1em solid #737a8c;
filter: drop-shadow(0 0.1em 0 #0003);
top: 7em;
left: 0;
width: 10em;
height: 7.9em;
}
.pa__inner-track {
border-top: 0.1em solid #0000;
filter: drop-shadow(0 0.1em 0 #0003);
top: 2.15em;
left: 0.5em;
width: 9em;
height: 9.5em;
}
.pa__pipe {
background:
radial-gradient(0.4em 0.4em at 0.3em 50%,#c39b22 30%,#a17445 31% 49%,#a1744500 50%),
radial-gradient(0.4em 0.4em at 2.1em 50%,#17181c 30%,#794107 31% 49%,#79410700 50%),
#17181c22;
border-radius: 0.3em;
box-shadow:
0 0 0 0.1em #826717 inset,
0.1em 0.15em 0 #fffa inset,
0 0 0 0.15em #0003 inset,
0.05em 0.05em 0 #0003;
top: 12em;
left: 7.4em;
width: 2.4em;
height: 0.6em;
transform: rotate(10deg);
}
.pa__launcher {
background:
radial-gradient(0.15em 0.15em at 60% 20%,#c39b22 48%,#c39b2200 50%),
radial-gradient(0.4em 0.4em at 48% 35%,#5c6270 49%,#5c627000 50%),
linear-gradient(15deg,#5c627000 59%,#5c6270 60%);
top: 13.8em;
left: 6em;
width: 2.6em;
height: 1.3em;
}
.pa__launcher:before {
background:
radial-gradient(0.15em 0.15em at 0.1em 0.1em,#c39b22 48%,#c39b2200 50%),
linear-gradient(15deg,#515662 49%,#51566200 50%),
linear-gradient(-15deg,#515662 49%,#51566200 50%);
top: 0;
left: 0;
width: 100%;
height: 40%;
transform: rotate(17deg);
transform-origin: 0 0;
}
.pa__launcher:after {
background-color: #17181c;
border-radius: 0.1em;
box-shadow: 0 0.4em #abafba inset;
top: 0.2em;
left: 2.25em;
width: 0.25em;
height: 0.5em;
transform: rotate(25deg);
}
.pa__launcher-base {
background: #aaaa09;
border-radius: 0.75em 0 0 0;
box-shadow:
0.05em 0.05em 0 #e3e4e8 inset,
0.1em 0.1em 0 #abafba inset,
0.15em 0.15em 0 #737a8c inset,
0 -0.05em 0 #737a8c,
0 -0.25em 0 #abafba,
0 -0.3em 0 #e3e4e8;
right: 0;
bottom: 0;
width: 1.6em;
height: 1.1em;
}
.pa__launcher-base:before {
background:
radial-gradient(0.2em 0.2em at 0.6em 0.15em,#98781b 49%,#98781b00 50%),
radial-gradient(0.2em 0.2em at 1.3em 0.15em,#98781b 49%,#98781b00 50%);
top: -0.3em;
width: 100%;
height: 0.3em;
}
.pa__coin-tray {
background:
linear-gradient(90deg,#2e3138 0.05em,#2e313800 0.05em 1.45em,#2e3138 1.45em) 0.2em 1.4em / 1.5em 0.85em,
radial-gradient(0.2em 0.2em at 0.95em 1.85em,#5c6270 49%,#5c627000 50%),
radial-gradient(0.25em 0.25em at 0.95em 1.9em,#abafba 49%,#abafba00 50%),
linear-gradient(#9da2ae 0.25em,#5c6270 0.25em 0.4em,#abafba 0.4em 0.55em,#737a8c 0.55em) 0.2em 1.4em / 1.5em 0.85em,
linear-gradient(105deg,#c7cad1 2.68em,#e3e4e8 2.7em 2.78em,#8f95a3 2.8em 2.83em,#8f95a300 2.85em) 2.4em 1.4em / 3em 0.4em,
linear-gradient(#9da2ae 50%,#818897 50%) 0 1.8em / 0.2em 0.5em,
linear-gradient(#9da2ae 50%,#818897 50%) 1.6em 1.8em / 4.4em 0.5em,
linear-gradient(90deg,#fff0 1.7em,#fff 1.7em 1.75em,#c7cad1 1.75em 1.8em,#c7cad100 1.8em 3.75em,#fff 3.75em 3.8em,#c7cad1 3.8em 3.85em,#c7cad100 3.85em) 0.25em 0.2em / 100% 0.25em,
linear-gradient(#fff 0.1em,#e3e4e8 0.1em 0.15em,#fff 0.15em 0.2em,#c7cad1 0.2em 0.25em,#e3e4e8 0.25em 0.45em,#fff 0.45em 0.5em,#c7cad1 0.5em 0.55em,#e3e4e8 0.55em 0.6em,#fff 0.6em 0.65em,#c7cad1 0.65em 0.7em,#e3e4e8 0.7em 1.4em,#abafba 1.4em 2.25em,#abafba00 2.25em);
background-repeat: no-repeat;
border-radius: 0.1em 0.1em 0 0;
box-shadow: 0.2em 0.2em 0 #0003;
margin-bottom: 0.75em;
padding-top: 0.65em;
width: 6em;
height: 2.25em;
}
.pa__coin-tray:before, .pa__coin-tray:after {
left: 2em;
width: 3em;
}
.pa__coin-tray:before {
background-color: #17181c;
border-top: 0.2em solid #abafba;
border-right: 0.5em solid #d5d7dd;
border-bottom: 0.2em solid #c7cad1;
border-left: 0.5em solid #8f95a3;
box-shadow:
0.5em 0 0 #e3e4e8 inset,
-0.1em 0 0 #737a8c inset,
0 -0.1em 0 #5c6270 inset,
0 -0.4em 0 #2e3138 inset;
clip-path: polygon(0 0,100% 0,100% 25%,90% 100%,10% 100%,0 25%);
top: 0.7em;
height: 1.1em;
}
.pa__coin-tray:after {
background-color: #818897;
border-radius: 0 0 50% 50%;
box-shadow:
0 -0.1em 0 #737a8c inset,
0 -0.35em 0 #abafba inset;
top: 100%;
height: 0.7em;
}
.pa__coin-tray-text {
color: #c7cad1;
display: block;
font: bold 0.5em/1.5 serif;
text-align: center;
text-shadow: 0 0.05rem 0 #fff;
width: 2rem;
}
.pa__center1, .pa__center2 {
left: 4em;
width: 2em;
height: 0.8em;
}
.pa__center1 {
background:
radial-gradient(0.2em 0.2em at 5% 50%,#ad7e1f 49%,#ad7e1f00 50%),
radial-gradient(0.2em 0.2em at 95% 50%,#ad7e1f 49%,#ad7e1f00 50%),
radial-gradient(0.2em 0.2em at 35% 10%,#ad7e1f 49%,#ad7e1f00 50%),
radial-gradient(0.2em 0.2em at 35% 40%,#ad7e1f 49%,#ad7e1f00 50%),
radial-gradient(0.2em 0.2em at 65% 10%,#ad7e1f 49%,#ad7e1f00 50%),
radial-gradient(0.2em 0.2em at 65% 40%,#ad7e1f 49%,#ad7e1f00 50%),
radial-gradient(0.2em 0.2em at 50% 85%,#aa0909 49%,#aa090900 50%),
#5c6270;
clip-path: polygon(30% 0,70% 0,80% 50%,88% 50%,88% 40%,100% 40%,100% 65%,65% 100%,35% 100%,0 65%,0 40%,12% 40%,12% 50%,20% 50%);
top: 4.2em;
}
.pa__center2 {
background:
radial-gradient(0.2em 0.2em at 0.8em 0.3em,#c7cad1 49%,#c7cad100 50%),
radial-gradient(0.2em 0.2em at 1.2em 0.3em,#c7cad1 49%,#c7cad100 50%),
#8f95a3;
border-radius: 25% 25% 25% 25% / 75% 75% 25% 25%;
box-shadow:
0 0 0 0.15em #5c6270 inset,
-0.2em 0 0 #abafba inset,
0 -0.2em 0 #abafba inset,
0.05em 0.05em 0 #0003;
top: 5em;
}
.pa__center3 {
background:
radial-gradient(100% 100% at center,#f9f986 16%,#f9f98600 17%),
linear-gradient(0deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
linear-gradient(22.5deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
linear-gradient(45deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
linear-gradient(67.5deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
linear-gradient(90deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
linear-gradient(112.5deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
linear-gradient(135deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
linear-gradient(157.5deg,#abafba00 49%,#abafba 49% 51%,#abafba00 51%),
radial-gradient(100% 100% at center,#abafba 19%,#c7cad1 20% 29%,#17181c 30% 34%,#abafba 35% 37%,#c7cad1 38% 42%,#abafba 43% 44%,#c7cad1 45% 49%,#c7cad100 50%);
border-radius: 50%;
box-shadow: 0 0 0 0.05em #0007;
top: 5.8em;
left: 3.8em;
width: 2.4em;
height: 2.4em;
}
.pa__center3:before {
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
box-shadow:
0 0.1em 0 #e3e4e8 inset,
0 0.2em 0 #8f95a3 inset,
0 0.3em 0 #0003 inset;
top: -0.2em;
left: 0.1em;
width: 2.2em;
height: 0.6em;
}
.pa__center3:after {
background: #8f95a3;
border-radius: 0 0 30% 30% / 0 0 100% 100%;
box-shadow:
0 -0.1em 0 #5c6270 inset;
top: 0;
left: 0.8em;
width: 0.8em;
height: 0.2em;
}
.pa__symbol {
background:
conic-gradient(#f42525 8.3%,#f4252500 8.3% 16.7%,#17181c00 16.7% 25%,#17181c 25% 41.7%,#17181c00 41.7% 50%,#255ff400 50% 58.3%,#255ff4 58.3% 75%,#255ff400 75% 83.3%,#f4252500 83.3% 91.7%,#f42525 91.7%);
clip-path: polygon(0 0,100% 0,100% 50%,75% 100%,25% 100%,0 50%);
top: 50%;
left: 50%;
width: 0.6em;
height: 0.6em;
transform: translate(-50%,-50%);
}
.pa__symbol--white, .pa__symbol--darkgray, .pa__symbol--gray {
margin-top: 0.1em;
width: 0.7em;
height: 0.7em;
}
.pa__symbol--white {
background:
conic-gradient(#e3e4e8 8.3%,#e3e4e800 8.3% 25%,#e3e4e8 25% 41.7%,#e3e4e800 41.7% 58.3%,#e3e4e8 58.3% 75%,#e3e4e800 75% 91.7%,#e3e4e8 91.7%);
transform: translate(-50%,-55%);
}
.pa__symbol--darkgray {
background:
conic-gradient(#737a8c 8.3%,#737a8c00 8.3% 25%,#737a8c 25% 41.7%,#737a8c00 41.7% 58.3%,#737a8c 58.3% 75%,#737a8c00 75% 91.7%,#737a8c 91.7%);
transform: translate(-45%,-50%);
}
.pa__symbol--gray {
background:
conic-gradient(#abafba 8.3%,#abafba00 8.3% 25%,#abafba 25% 41.7%,#abafba00 41.7% 58.3%,#abafba 58.3% 75%,#abafba00 75% 91.7%,#abafba 91.7%);
}
.pa__lever-group {
margin: 0 0 0.75em 0.25em;
width: 2.25em;
height: 2.75em;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.pa__lever {
display: block;
filter: drop-shadow(0.15em 0.15em 0 #0003);
}
.pa__lever--1 {
background:
radial-gradient(0.25em 0.25em at 0.4em 1.4em,#8f95a3 49%,#8f95a300 50%),
radial-gradient(0.25em 0.25em at 1.35em 1.4em,#8f95a3 49%,#8f95a300 50%),
radial-gradient(0.25em 0.25em at 1.35em 2.35em,#8f95a3 49%,#8f95a300 50%),
radial-gradient(0.25em 0.25em at 0.4em 2.35em,#8f95a3 49%,#8f95a300 50%),
radial-gradient(1.75em 1.75em at 0.875em 1.875em,#fff 5.5%,#5c6270 6% 14.5%,#8f95a3 15% 17%,#5c6270 18% 22.5%,#8f95a3 23% 25%,#5c6270 26% 47%,#8f95a3 47% 49%,#8f95a300 50%);
border-radius: 0 0 0 0.875em;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 2.25em;
height: 2.75em;
transition-delay: 0.15s;
visibility: hidden;
-webkit-tap-highlight-color: #0000;
z-index: 1;
}
.pa__lever--1:active:before {
transform: rotate(15deg);
}
.pa__lever--2 {
background:
radial-gradient(100% 100% at center,#abafba 24%,#5c6270 25% 40%,#abafba 41% 49%,#abafba00 50%);
border-radius: 50%;
margin-bottom: 0.25em;
width: 1em;
height: 1em;
}
.pa__lever--1:before {
border-radius: 0 1em 0 100% / 100% 100% 0 0;
box-shadow:
0 0.1em 0 #fff inset,
0 0.2em 0 #abafba inset;
top: 1.775em;
left: 0.875em;
width: 2.4em;
height: 0.6em;
transform: rotate(-60deg);
transform-origin: 0 0.1em;
transition: transform 0.15s ease-in-out;
}
.pa__lever--2:before {
background-color: #e3e4e8;
border-radius: 0.1em;
box-shadow:
0.3em 0 0 #8f95a3 inset;
top: calc(50% - 0.1em);
left: calc(50% - 0.1em);
width: 0.5em;
height: 0.2em;
transform: rotate(45deg);
transform-origin: 0.1em 0.1em;
}
.pa__sr {
clip: rect(1px,1px,1px,1px);
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
}
.pa__ui {
height: 3.5em;
justify-content: flex-end;
align-items: flex-end;
width: 9.9em;
}
.pa__input:first-of-type:checked ~ .pa__ui .pa__lever--1:nth-child(2),
.pa__input:nth-of-type(2):checked ~ .pa__ui .pa__lever--1:nth-child(3),
.pa__input:nth-of-type(3):checked ~ .pa__ui .pa__lever--1:nth-child(4),
.pa__input:nth-of-type(4):checked ~ .pa__ui .pa__lever--1:nth-child(5),
.pa__input:nth-of-type(5):checked ~ .pa__ui .pa__lever--1:nth-child(6),
.pa__input:nth-of-type(6):checked ~ .pa__ui .pa__lever--1:nth-child(7),
.pa__input:nth-of-type(7):checked ~ .pa__ui .pa__lever--1:nth-child(8),
.pa__input:nth-of-type(8):checked ~ .pa__ui .pa__lever--1:nth-child(9),
.pa__input:nth-of-type(9):checked ~ .pa__ui .pa__lever--1:nth-child(10),
.pa__input:nth-of-type(10):checked ~ .pa__ui .pa__lever--1:first-child,
.pa__input:last-of-type:checked ~ .pa__ui .pa__lever--1:first-child {
visibility: visible;
}
.pa__input:first-of-type:checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(2):checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(3):checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--1,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--1 {
animation:
0.2s 0s b1Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.1s 0.2s b1Bx cubic-bezier(0.42, 0.18, 0.71, 0.51),
0.05s 0.3s b1Cx cubic-bezier(0.29, 0.44, 0.63, 0.78),
0.05s 0.35s b1Dx linear,
0.05s 0.4s b1Ex cubic-bezier(0.06, 0.92, 1, 1),
0.15s 0.45s b1Fx linear,
0.2s 0.6s b1Gx cubic-bezier(0.12, 0.96, 1, 1),
0.2s 0.8s b1Hx cubic-bezier(0.2, 0.76, 1, 1),
0.25s 1s b1Ix cubic-bezier(0.75, 0.2, 1, 1);
}
.pa__input:first-of-type:checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(2):checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(3):checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--1:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--1:before {
animation:
0.2s 0s b1Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.1s 0.2s b1By cubic-bezier(0.19, 0.59, 0.69, 0.92),
0.05s 0.3s b1Cy cubic-bezier(0.51, 0.26, 0.79, 0.54),
0.9s 0.35s b1Dy linear;
}
.pa__input:nth-of-type(2):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(3):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--2,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--2 {
animation:
0.4s 0s b2Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.2s 0.4s b2Bx cubic-bezier(0.4, 0.22, 0.72, 0.54),
0.1s 0.6s b2Cx linear,
0.2s 0.7s b2Dx cubic-bezier(0.22, 0.76, 1, 1),
0.5s 0.9s b2Ex linear;
}
.pa__input:nth-of-type(2):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(3):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--2:before,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--2:before {
animation:
0.4s 0s b2Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.2s 0.4s b2By cubic-bezier(0.18, 0.44, 0.65, 0.92),
0.1s 0.6s b2Cy cubic-bezier(0.67, 0, 1, 1),
0.3s 0.7s b2Dy linear,
0.1s 1s b2Ey cubic-bezier(0.42, 0, 1, 1),
0.2s 1.1s b2Fy linear,
0.1s 1.3s b2Gy cubic-bezier(0.67, 0, 1, 1);
}
.pa__input:nth-of-type(3):checked ~ .pa__playfield .pa__ball--3,
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--3,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--3,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--3,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--3,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--3,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--3,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--3 {
animation:
0.2s 0s b3Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.1s 0.2s b3Bx cubic-bezier(0.48, 0.18, 0.75, 0.44),
0.1s 0.3s b3Cx linear,
0.1s 0.4s b3Dx cubic-bezier(0.25, 0.46, 0.61, 0.81),
0.2s 0.5s b3Ex linear,
0.2s 0.7s b3Fx cubic-bezier(0.12, 0.96, 1, 1),
0.2s 0.9s b3Gx cubic-bezier(0.2, 0.76, 1, 1),
0.2s 1.1s b3Hx cubic-bezier(0.75, 0.2, 1, 1);
}
.pa__input:nth-of-type(3):checked ~ .pa__playfield .pa__ball--3:before,
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--3:before,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--3:before,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--3:before,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--3:before,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--3:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--3:before,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--3:before {
animation:
0.2s 0s b3Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.1s 0.2s b3By cubic-bezier(0.18, 0.49, 0.61, 0.93),
0.05s 0.3s b3Cy cubic-bezier(0.48, 0.14, 0.83, 0.5),
0.05s 0.35s b3Dy linear,
0.7s 0.4s b3Ey linear,
0.2s 1.1s b3Fy linear;
}
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--4,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--4,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--4,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--4,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--4,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--4,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--4 {
animation:
0.2s 0s b4Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.1s 0.2s b4Bx cubic-bezier(0.42, 0.18, 0.71, 0.51),
0.1s 0.3s b4Cx cubic-bezier(0.29, 0.44, 0.63, 0.78),
0.5s 0.4s b4Dx linear,
0.15s 0.9s b4Ex linear;
}
.pa__input:nth-of-type(4):checked ~ .pa__playfield .pa__ball--4:before,
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--4:before,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--4:before,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--4:before,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--4:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--4:before,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--4:before {
animation:
0.2s 0s b4Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.1s 0.2s b4By cubic-bezier(0.19, 0.59, 0.69, 1),
0.05s 0.3s b4Cy cubic-bezier(0.33, 0, 0.7, 0.33),
0.05s 0.35s b4Dy linear,
0.2s 0.4s b4Ey cubic-bezier(0.52, 0, 0.81, 0.36),
0.1s 0.6s b4Fy linear,
0.1s 0.7s b4Gy cubic-bezier(0.5, 0.04, 0.96, 0.38),
0.1s 0.8s b4Hy cubic-bezier(0.52, 0, 0.81, 0.36),
0.15s 0.9s b4Iy cubic-bezier(0.71, 0, 0.96, 0.29);
}
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--5,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--5,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--5,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--5,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--5,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--5 {
animation:
0.2s 0s b5Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.1s 0.2s b5Bx cubic-bezier(0.42, 0.18, 0.83, 0.55),
0.35s 0.3s b5Cx linear;
}
.pa__input:nth-of-type(5):checked ~ .pa__playfield .pa__ball--5:before,
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--5:before,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--5:before,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--5:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--5:before,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--5:before {
animation:
0.2s 0s b5Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.1s 0.2s b5By cubic-bezier(0.17, 0.52, 0.68, 0.97),
0.1s 0.3s b5Cy cubic-bezier(0.59, 0, 0.9, 0.57),
0.25s 0.4s b5Dy linear;
}
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--6,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--6,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--6,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--6,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--6 {
animation:
0.2s 0s b6Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.1s 0.2s b6Bx cubic-bezier(0.42, 0.18, 0.71, 0.51),
0.1s 0.3s b6Cx cubic-bezier(0.29, 0.44, 0.63, 0.78),
0.5s 0.4s b6Dx linear,
0.2s 0.9s b6Ex linear,
0.25s 1.1s b6Fx cubic-bezier(0.54, 0.15, 1, 0.64);
}
.pa__input:nth-of-type(6):checked ~ .pa__playfield .pa__ball--6:before,
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--6:before,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--6:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--6:before,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--6:before {
animation:
0.2s 0s b6Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.1s 0.2s b6By cubic-bezier(0.19, 0.59, 0.69, 1),
0.05s 0.3s b6Cy cubic-bezier(0.33, 0, 0.7, 0.33),
0.05s 0.35s b6Dy linear,
0.2s 0.4s b6Ey cubic-bezier(0.52, 0, 0.81, 0.36),
0.1s 0.6s b6Fy linear,
0.1s 0.7s b6Gy cubic-bezier(0.5, 0.04, 0.96, 0.38),
0.1s 0.8s b6Hy cubic-bezier(0.52, 0, 0.81, 0.36),
0.2s 0.9s b6Iy cubic-bezier(0.71, 0, 0.96, 0.29),
0.25s 1.1s b6Jy linear;
}
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--7,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--7,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--7,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--7 {
animation:
0.4s 0s b7Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.2s 0.4s b7Bx cubic-bezier(0.4, 0.22, 0.72, 0.54),
0.1s 0.6s b7Cx linear,
0.2s 0.7s b7Dx cubic-bezier(0.22, 0.76, 1, 1),
0.4s 0.9s b7Ex linear,
0.25s 1.3s b7Fx linear,
0.35s 1.55s b7Gx cubic-bezier(0.45, 0, 1, 1);
}
.pa__input:nth-of-type(7):checked ~ .pa__playfield .pa__ball--7:before,
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--7:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--7:before,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--7:before {
animation:
0.4s 0s b7Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.2s 0.4s b7By cubic-bezier(0.18, 0.44, 0.65, 0.92),
0.1s 0.6s b7Cy cubic-bezier(0.67, 0, 1, 1),
0.3s 0.7s b7Dy linear,
0.1s 1s b7Ey cubic-bezier(0.42, 0, 1, 1),
0.2s 1.1s b7Fy linear,
0.25s 1.3s b7Gy cubic-bezier(1, 0, 1, 1),
0.35s 1.55s b7Hy linear;
}
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--8,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--8,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--8 {
animation:
0.2s 0s b8Ax cubic-bezier(0.19, 0.45, 0.68, 1),
0.1s 0.2s b8Bx cubic-bezier(0.42, 0.18, 0.71, 0.51),
0.05s 0.3s b8Cx cubic-bezier(0.29, 0.44, 0.63, 0.78),
0.05s 0.35s b8Dx linear,
0.05s 0.4s b8Ex cubic-bezier(0.06, 0.92, 1, 1),
0.15s 0.45s b8Fx linear,
0.3s 0.6s b8Gx linear,
0.2s 0.9s b8Hx linear;
}
.pa__input:nth-of-type(8):checked ~ .pa__playfield .pa__ball--8:before,
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa__ball--8:before,
.pa__input:nth-of-type(10):checked ~ .pa__playfield .pa__ball--8:before {
animation:
0.2s 0s b8Ay cubic-bezier(0.44, 0.22, 0.75, 0.53),
0.1s 0.2s b8By cubic-bezier(0.19, 0.59, 0.69, 0.92),
0.05s 0.3s b8Cy cubic-bezier(0.51, 0.26, 0.79, 0.54),
0.25s 0.35s b8Dy linear,
0.2s 0.6s b8Ey cubic-bezier(0.75, 0, 1, 1),
0.2s 0.8s b8Fy linear,
0.1s 1s b8Gy cubic-bezier(0.71, 0, 1, 0.29);
}
.pa__input:nth-of-type(9):checked ~ .pa__playfield .pa.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0