jquery年会大屏抽奖效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery年会大屏抽奖效果代码，手动开始和结束

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        *{
        margin:0;
        padding:0;
    }
    .box{
        width:100%;
        text-align:center;
        /*position: absolute;*/
        vertical-align: middle;
        height: 100%;
        margin: 4% auto 0 auto!important;
    }
    .lucky-list-outer {
        width: 90%;
        max-width: 300px;
        background: #ffffff;
        overflow: hidden;
        margin: 0 auto;
        min-height: 300px;
        height: 100%;
    }
    .list {
        height: 80%;
        overflow: auto;
    }
    video{
        position: fixed;
        right: 0px;
        bottom: 0px;
        object-fit:fill;
        /*min-width: 100%;*/
        /*min-height: 100%;*/
        height: 100%;
        width: 100%;
        /*加滤镜*/
        /*-webkit-filter: grayscale(100%);*/
        /*filter:grayscale(100%);*/
    }
    source{
        /*min-width: 100%;*/
        /*min-height: 100%;*/
        height: 100%;
        width: 100%;
    }
    .show-outer {
        height: 100%;
        min-height: 85vh;
        vertical-align: middle;
    }
    .action-outer {
        cursor: pointer;
        position: fixed;
        z-index: 1;
        width: 100%;
        top: 0;
    }
    .btns {
        padding-top: 10px !important;
    }
    
    .show-actions {
        max-height: 114px;
        transition: max-height .5s ease-in;
        transform-origin: 50% 0;
        animation: slide-down 0.5s ease-in;
        -webkit-animation: slide-down 0.5s ease-in;
    }
    
    .hidden-actions {
        max-height: 0;
        overflow: hidden;
        z-index: -10;
        transition: max-height .5s ease-out;
    }
    /*.jz{float:left;width:420px;height:auto;margin:auto;padding-left:200px;}*/
    /*.jz p{line-height:80px;text-align:center;font-size:50px;color:#ffffff;}*/
    /*.jz span{display: block;width:420px;height:80px;line-height:80px;margin:20px 0;text-align:left;font-size:60px;background: #ffffff;}*/
    .start,.stop{width:200px;height:80px;line-height:80px;text-align:center;font-size:64px;border-radius:10px;margin:auto;color:#ffffff;cursor: pointer;}
    .start{background: #24ADD7;}
    .stop{background: #FC6666;}
    
    /*.lucky-list{float:left;width:300px;height: 500px;background: #666;margin: 10px;background: #ffffff;overflow: hidden;}*/
    /*.lucky-list .p1{line-height:40px;text-align:center;font-size:20px;padding:0;}*/
    /*.lucky-list p{line-height:30px;text-align:left;text-align:justify;padding-left:30px;}*/
    
    * {
        padding: 0;
        margin: 0;
    }
    .row{
        padding: 0;
        margin: 0;
    }
    html,body {
        width: 100%;
        min-height: 100%
    }
    
    body {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -webkit-background-size: 100% 100%;
        overflow: hidden;
        background-color: #D35254;
    	background-image: radial-gradient(#D35254, #b40306);
    }
    
    .clearfix:after {
        clear: both;
        display: table;
        content: ''
    }
    
    .container {
        position: relative;
        -webkit-transform: perspective(1000px);
        -moz-transform: perspective(1000px);
        -ms-transform: perspective(1000px);
        -o-transform: perspective(1000px);
        transform: perspective(1000px);
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -o-transform-origin: center center;
        transform-origin: center center;
        width: 85%;
        height: 60%;
        min-height: 65vh;
        margin-top: 10vh;
        display: none;
        vertical-align: middle;
        top: 20%;
    }
    
    .element,.js_current_dom {
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -ms-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
        background-color: #fff
    }
    
    .btn_outer {
        width: 130px;
        height: 130px;
        position: fixed;
        border-radius: 50%;
        background: linear-gradient(#f2f2f2, #FFF);
        top:40%;
        left: 60%;
        border: 1px solid #e3e3e3;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
        z-index: 9;
    }
    .btn_stop {
        top:70%;
        left: 80%;
    }
    .btn_circle{
        font-weight:bold;
        font-size:25px;
        background:#ff0618;
        display:inline-block;
        width:100px;
        height:100px;
        text-align:center;
        line-height:100px;
        border-radius:100%;
        margin-top: -2px;
        box-shadow:
                0 10px 0 #dc0010,
                0 15px 2px rgba(0,0,0,0.2);
        cursor:pointer;
        z-index: 9;
        color: #ffffff;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -ms-transition: all .2s linear;
        -o-transition: all .2s linear;
        transition: all .2s linear
    }
    .btn_circle:active{
        transform:translateY(8px);
        box-shadow:
                0 2px 0 #ff0618,
                0 4px 2px rgba(0,0,0,0.3);
    }
    
    .btn_circle:hover {
        background-color: #FF4351;
    }
    
    .mask {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        display: none;
        z-index: 999;
        min-height: 85vh;
        max-height: 85vh;
    }
    
    .lucky_icon {
        height: 70%;
        width: 70%;
        border-radius: 50%;
    }
    
    .lucky_userInfo {
        position: absolute;
        height: 100px;
        width: 100px;
        color: #fff;
        font-size: 24px;
        right: 0;
        float: right;
        text-align: center;
        margin: 0 auto;
    }
    
    .lucky_list {
        width: 100%;
        height: 100%;
        padding: 15px;
        position: relative;
        margin: 0 auto;
        background-color: rgba(255,255,255,.6);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        text-align: center;
        min-height: 80vh;
        max-height: 85vh;
    }
    
    .lpl_userInfo {
        width: 25%;
        height: 100px;
        text-align: center;
        float: left;
        margin-bottom: 10px
    }
    
    .lpl_userImage {
        width: 60px;
        height: 60px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%
    }
    
    .lpl_userName {
        margin-top: 12px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
       .........完整代码请登录后点击上方下载按钮下载查看