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

jquery年会大屏抽奖效果代码

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