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