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