GB-canvas-turntable实现一个手机端幸运大转盘抽奖活动效果代码

代码语言:html

所属分类:大转盘

代码描述:GB-canvas-turntable实现一个幸运大转盘抽奖活动效果代码

代码标签: GB-canvas-turntabl 幸运 大转盘 抽奖 活动

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>幸运大转盘</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/GB-canvas-turntable.css">
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
        margin:0;
        padding:0;
    }
    .bg{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }
    .zhuanp{
        position: fixed;
        width: 100%;
        top: 35vh;
        left: 0;
        z-index: 100;
    }
    #turntable{
        margin: 0 auto;
    }
    </style>

</head>

<body>
    <img class="bg" src="//repo.bfw.wiki/bfwrepo/image/6313300461c6d.png" alt="">
    <div class="zhuanp">
        <section id="turntable" class="gb-turntable">
            <div class="gb-turntable-container">
                <canvas class="gb-turntable-canvas" width="300" height="300px">抱歉!浏览器不支持。</canvas>
            </div>

            <a class="gb-turntable-btn" href="javascript:;">抽奖</a>
        </section>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GB-canva.........完整代码请登录后点击上方下载按钮下载查看

网友评论0