原生js实现九宫格旋转抽奖效果代码
代码语言:html
所属分类:大转盘
代码描述:原生js实现九宫格旋转抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <style> body,p{margin: 0;} .rui-luck-draw{ width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } .rui-luck-box { width: 75vw; height: 73vw; max-width: 600px; max-height: 600px; position: absolute; top: 11.5vw; left: 12vw; } .rui-luck-box div { width: 32%; height: 30%; text-align: center; box-sizing: border-box; /* border: 3px solid #ddd; */ border-radius: 10px; font-size: 30px; position: absolute; display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .rui-luck-box div img{ width: 100%; height: 100%; } .rui-luck-box div[prize='1'] { top: 0; left: 0; transform: translate(0, 0); } .rui-luck-box div[prize='2'] { top: 0; left: 50%; transform: translate(-50%, 0); } .rui-luck-box div[prize='3'] { top: 0; right: 0; transform: translate(0, 0); } .rui-luck-box div[prize='4'] { top: 50%; right: 0; transform: translate(0, -50%); } .rui-luck-box div[prize='5'] { bottom: 0; right: 0; transform: translate(0, 0); } .rui-luck-box div[prize='6'] { bottom: 0; left: 50%; transform: translate(-50%, 0); } .rui-luck-box div[prize='7'] { bottom: 0; left: 0; transform: translate(0, 0); } .rui-luck-box div[prize='8'] { top: 50%; left: 0; transform: translate(0, -50%); } .rui-luck-box div.rui-active { box-shadow: 0px 0px 50px inset red; } .rui-pointer { top: 50%; left: 50%; transform: translate(-50%, -50%); border: none!important; } .rui-luck-name{ font-size: 16px; text-align: left; height: 30px; line-height: 30px; position: fixed; top: 0; left: 0; z-index: 100; } .rui-luck-name a{ text-decoration: none; color: #777; padding: 0 20px; } .rui-luck-content{ width: 80vw; height: 80vw; max-width: 600px; max-height: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 10vw; } </style> </head> <body> <div class="rui-luck-draw"> <div class="rui-luck-content" style="background:url('//repo.bfw.wiki/bfwrepo/images/luky/chou-bg.png') no-repeat center center/100% 100%;"> <div class="rui-luck-box"> <div class="rui-luck-prize" prize="1"><img src="//repo.bfw.wiki/bfwrepo/images/luky/img1.png" alt=""></div> <div class="rui-luck-prize" prize="2"><img src="//repo.bfw.wiki/bfwrepo/images/luky/img2.png" alt=""></div> <div class="rui-luck-prize" prize="3"><img src="//repo.bfw.wiki/bfwrepo/images/luky/img5.png" alt=""></div> <div class="rui-luck-prize" prize="4"><img src="//repo.bfw.wiki/bfwrepo/images/luky/img4.png" alt=""></div> <div class="rui-pointer" onclick="startRotate()"></div> <div class="rui-luck-prize" prize="5"><img src="//repo.bfw.wiki/bfwrepo/images/luky/img3.png" alt=""></div> <div class="rui-luck-prize" prize="6"><img sr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0