slotmachine.js实现老虎机抽奖效果代码-html代码-BFW代码库

slotmachine.js实现老虎机抽奖效果代码

代码语言：html

所属分类：其他

代码描述：slotmachine.js实现老虎机抽奖效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.slotmachine.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *,
    *::before,
    *::after {
      box-sizing: border-box; 
    }
            @charset "utf-8";
        /* CSS Document */
        
        @import url(https://fonts.googleapis.com/css?family=Roboto);
        /* @import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One); */
        
        * {
          font-family: 'Roboto', sans-serif;
        }
        
        code {
          border: 1px solid #eee;
          border-radius: 5px;
          background-color: rgba(245, 245, 245, 0.7) !important;
          text-align: left;
        }
        
        .well {
          padding: 25px;
          background-color: rgba(245, 245, 245, 0.7);
          border-radius: 5px;
        }
        
        .well p {
          font-size:
        }
        
        .btn-group-justified {
          margin: 0 auto;
        }
        
        h1 {
          text-align: center;
          padding-bottom: 25px;
        }
        
        .container {
          padding-top: 50px;
          padding-bottom: 50px;
        }
        
        a{
          color: #ccd500;
          text-decoration: none;
        }
        
        a:hover{
          text-decoration: underline;
          color: #a9b119;
        }
        
        .slotMachine .slot{
          height:100px;
          background-position-x: 55%;
          background-repeat: no-repeat;
        }
        
        .slot1 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfec8250cca.png");
        }
        
        .slot2 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfec70631e8.png");
        }
        
        .slot3 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfec70631e8.png");
        }
        
        .slot4 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfec5f7d312.png");
        }
        
        .slot5 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfcc4999a85.png");
        }
        
        .slot6 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfec70631e8.png");
        }
        
        /*
         * Header
         */
        .header-line {
          width: 100%;
          position: absolute;
          height: 10px;
          background-color: #A48E4E;
          top: 0px;
        }
        
        header {
          margin-top: 10px;
          background-color: #DCD293;
          border-bottom: 10px solid #66D4FF;
          border-top: 20px dashed #A48E4E;
          padding: 2em;
          color:#333;
          font-size: 25px;
          text-align: center;
        }
        
        header a {
          color: #6C5726;
          font-weight: 700;
        }
        
        /*
         * Airlines
         */
        #plane {
          width: 100%;
          position: relative;
          border-bottom: 10px solid #B8312F;
          border-top: 20px dashed #66D4FF;
          background-color: rgb(0, 175, 225);
    
          background-size: contain;
          background-repeat: no-repeat;
          background-position: bottom left;
        }
        
        #plane .content {
          width: 100%;
          float: left;
          font-size: 50px;
          font-weight: 300;
          line-height: 42px;
          margin-top: 30px;
          text-align: center;
        }
        
        #plane .content, footer .content{
          font-family: 'Pathway Gothic One';
          font-size: 70px;
          font-weight: 300;
          line-height: 80px;
        }
        
        .badge {
          color: white;
          vertical-align: middle;
          font-size: 30px;
          background-color: rgb(0, 175, 225);
        }
        
        #planeMachine {
          height: 67px;
          overflow: hidden;
          display: inline-block;
          text-align: left;
        }
        
        /*
         * SlotMachine
         */
        #randomize {
          border-bottom: 10px solid rgb(72, 158, 48);
          background-color: #EB6B56;
          border-top: 20px dashed #B8312F;
        }
        
        #randomize .row > div.col-sm-4 > div {
          paddi.........完整代码请登录后点击上方下载按钮下载查看