css+js实现赌场老虎机摇号机代码-html代码-BFW代码库

代码语言：html
代码描述：css+js实现赌场老虎机摇号机代码，点击spin开始运作，点击stop产生结果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Odor+Mean+Chey&display=swap");
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --length: min(0.9vw, 0.55vh);
          --radius: min(1.8vw, 1.1vh);
        }
        
        body {
          height: 100vh;
          width: 100vw;
          background: radial-gradient(circle at center, #ffffe6, #2e386b);
          display: grid;
          place-content: center;
          overflow: hidden;
        }
        
        .container {
          width: calc(80 * var(--length));
          aspect-ratio: 2/3;
        }
        
        .slot-machine {
          height: 100%;
          width: 100%;
          background: #473d5c;
          display: grid;
          border-radius: var(--radius) var(--radius) 0 0;
          grid-template-rows: 1fr 2fr 1.5fr;
          grid-template-areas: "top" "middle" "bottom";
        }
        
        .slot-machine-top {
          grid-area: top;
          position: relative;
          height: 97.5%;
          background: #1a004d;
          border-radius: var(--radius);
        }
        .slot-machine-top .bulb-container {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
        .slot-machine-top .top-bulb {
          left: 5%;
          width: 90%;
          top: 0.5%;
        }
        .slot-machine-top .bottom-bulb {
          left: 5%;
          width: 90%;
          bottom: 0.5%;
        }
        .slot-machine-top .left-bulb {
          flex-direction: column;
          width: 5%;
          height: 100%;
          left: 0.5%;
        }
        .slot-machine-top .right-bulb {
          flex-direction: column;
          width: 5%;
          height: 100%;
          right: 0.5%;
        }
        .slot-machine-top .bulb {
          font-size: calc(2.5 * var(--length));
          color: #fbbb32;
          text-shadow: calc(-0.2 * var(--length)) calc(-0.2 * var(--length)) calc(1 * var(--length)) #fff, calc(0.2 * var(--length)) calc(0.2 * var(--length)) calc(1 * var(--length)) #fff, 0 0 calc(0.5 * var(--length)) #fbbb32, 0 0 calc(1 * var(--length)) #fbbb32, 0 0 calc(1.5 * var(--length)) #fbbb32, 0 0 calc(2 * var(--length)) #fbbb32, 0 0 calc(2.5 * var(--length)) #fbbb32;
        }
        .slot-machine-top .machine-title {
          position: absolute;
          width: calc(70 * var(--length));
          height: calc(17.5 * var(--length));
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: "Odor Mean Chey", serif;
          display: grid;
          place-content: center;
          color: #d3342e;
          font-size: calc(12.5 * var(--length));
          font-weight: bolder;
          letter-spacing: calc(1.5 * var(--length));
          border-radius: inherit;
          background: #222;
        }
        .slot-machine-top .jackpot {
          text-shadow: calc(-0.2 * var(--length)) calc(-0.2 * var(--length)) calc(1 * var(--length)) #fff, calc(0.2 * var(--length)) calc(0.2 * var(--length)) calc(1 * var(--length)) #fff, 0 0 calc(1 * var(--length)) #d3342e, 0 0 calc(2 * var(--length)) #d3342e, 0 0 calc(3 * var(--length)) #d3342e, 0 0 calc(4 * var(--length)) #d3342e, 0 0 calc(5 * var(--length)) #d3342e;
        }
        
        .slot-machine-middle {
          grid-area: middle;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: calc(5 * var(--length));
          border-radius: var(--radius);
          background: #1a004d;
        }
        .slot-machine-middle .spinner-frame {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 80%;
          height: 80%;
          background: #fbbb32;
          border-radius: var(--radius);
        }
        .slot-machine-middle .spinner-frame::after {
          content: "";
          position: absolute;
          height: 77.5%;
          width: 82.5%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: inherit;
          background: #1a004d;
        }
        .slot-machine-middle .spinner-shape {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 65%;
          height: 60%;
          background: conic-gradient(#737373 58.5deg, #8c8c8c 58.5deg 121.5deg, #737373 121.5deg 238.5deg, #8c8c8c 238.5deg 301.5deg, #737373 301.5deg);
          border-radius: var(--radius);
        }
        .slot-machine-middle .spinner-shape::before {
          content: "";
          position: absolute;
          height: 90%;
          width: 90%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #1a004d;
        }
        .slot-machine-middle .spinners-container {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          height: 50%;
          width: 60%;
          overflow: hidden;
        }
        .slot-machine-middle .spinners-container .overlay {
          position: absolute;
          height: 100%;
          width: 30%;
          border: 2px solid black;
          background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0.15) 33%, rgba(255, 255, 255, 0.15) 66%, rgba(0, 0, 0, 0.75));
        }
        .slot-machine-middle .spinners-container .spinner-container {
          width: 30%;
          height: 100%;
          display: grid;
          place-content: center;
          background: whitesmoke;
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner {
          position: relative;
          width: 100%;
          height: inherit;
          transform-style: preserve-3d;
          transform-origin: 50% 50% calc(-30 * var(--length));
          pointer-events: none;
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner .symbol {
          position: absolute;
          backface-visibility: hidden;
          height: 100%;
          width: 100%;
          font-size: calc(10 * var(--length));
          display: grid;
          place-content: center;
          transform-origin: 50% 50% calc(-30 * var(--length));
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(1) {
          transform: rotateX(30deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(2) {
          transform: rotateX(60deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(3) {
          transform: rotateX(90deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(4) {
          transform: rotateX(120deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(5) {
          transform: rotateX(150deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(6) {
          transform: rotateX(180deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(7) {
          transform: rotateX(210deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(8) {
          transform: rotateX(240deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(9) {
          transform: rotateX(270deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(10) {
          transform: rotateX(300deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(11) {
          transform: rotateX(330deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner > div:nth-child(12) {
          transform: rotateX(360deg);
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner-1 {
          transform: rotateX(var(--rot-spin));
          transition: transform var(--rot-speed) linear;
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner-2 {
          transform: rotateX(var(--rot-spin));
          transition: transform var(--rot-speed) linear;
        }
        .slot-machine-middle .spinners-container .spinner-container .spinner-3 {
          transform: rotateX(var(--rot-spin));
          transition: transform var(--rot-speed) linear;
        }
        .slot-machine-middle .spinners-container .spinner-container::after {
          content: "";
          position: absolute;
        }
        .slot-machine-middle .glass-effect {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 50%;
          width: 60%;
          border-radius: inherit;
          background: rgba(172, 206, 199, 0.15);
          backdrop-filter: blur(0.3px);
          -webkit-backdrop-filter: blur(0.3px);
        }
        
        .slot-machine-bottom {
          grid-area: bottom;
          position: relative;
          top: calc(-12.5 * var(--length));
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          transform-style: preserve-3d;
          perspective: calc(75 * var(--length));
        }
        .slot-machine-bottom .button-container {
          position: relative;
          width: 100%;
          height: 60%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          transform-origin: top;
          transform: translateY(calc(2.5 * var(--length))) rotateX(30deg);
          background: linear-gradient(transparent 90%, #120330), #1a004d;
          transform-style: preserve-3d;
          border-top: 2px solid black;
        }
        .slot-machine-bottom .button-container button {
          --btn-bottom: 12.5%;
          position: relative;
          background-color: #222;
          cursor: pointer;
          width: 40%;
          height: 75%;
          font-size: calc(10 * var(--length));
          border: none;
          top: 0;
          border-radius: calc(7.5 * var(--length));
        }
        .slot-machine-bottom .button-container button:nth-child(1) {
          background: radial-gradient(circle at 35% 40%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), radial-gradient(circle at 65% 40%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), #003300;
        }
        .slot-machine-bottom .button-container button:nth-child(2) {
          background: radial-gradient(circle at 35% 40%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), radial-gradient(circle at 65% 40%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), #950e29;
        }
        .slot-machine-bottom .button-container button::before {
          font-family: "Odor Mean Chey", serif;
          position: absolute;
          height: 100%;
          width: 100%;
          border-radius: inherit;
          left: 0;
          color: rgba(255, 255, 255, 0.9);
          text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5), 1px 0px 0 rgba(0, 0, 0, 0.5), 0px 1px 0 rgba(0, 0, 0, 0.5), -1px 0px 0 rgba(0, 0, 0, 0.5), 0px -1px 0 rgba(0, 0, 0, 0.5);
          display: grid;
          place-content: center;
        }
        .slot-machine-bottom .button-container button:nth-child(1)::before {
          content: "SPIN";
          bottom: var(--btn-bottom);
          left: calc(-0.5 * var(--length));
          background: radial-gradient(circle at 27.5%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), radial-gradient(circle at 72.5%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), green;
        }
        .slot-machine-bottom .button-container button:nth-child(2)::before {
          content: "STOP";
          bottom: var(--btn-bottom);
          left: calc(0.5 * var(--length));
          background: radial-gradient(circle at 27.5%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), radial-gradient(circle at 72.5%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), #db143c;
        }
        .slot-machine-bottom .slot-machine-footer {
          position: absolute;
          width: 100%;
          height: 150%;
          background: #120330;
          transform-origin: top;
          transform: translateY(100%) rotateX(-30deg);
          bottom: 0;
        }
        .slot-machine-bottom .slot-machine-footer .casino-name {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 75%;
          height: 50%;
          display: grid;
          place-content: center;
          font-family: "Odor Mean Chey", serif;
          display: grid;
          place-content: center;
          color: #d3342e;
          font-size: calc(7.5 * var(--length));
          font-weight: bolder;
          letter-spacing: calc(0.75 * var(--length));
          background: radial-gradient(circle at 25%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), radial-gradient(circle at 75%, rgba(255, 255, 128, 0.75) 5%, rgba(51, 51, 51, 0) 50%), conic-gradient(#fbbb32 25deg, #fde168 25deg 60deg, #fbbb32 60deg 80deg, #fde168 80deg 95deg, #f.........完整代码请登录后点击上方下载按钮下载查看