原生js实现九宫格抽奖效果
代码语言:html
所属分类:电商
代码描述:原生js实现九宫格抽奖效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js九宫格抽奖</title> <style> *{ padding: 0; margin: 0; } #prize{ position: absolute; left: 50%; transform: translateX(-50%); top: 100px; display: block; width: 320px; height: 40px; background-color: rgb(255, 255, 255); border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px; letter-spacing: 2px; text-align: center; line-height: 40px; } div{ width: 330px; height: 330px; position: relative; left: 50%; top:50%; transform:translate(-50%,50%); } div>span{ float: left; width: 100px; height: 100px; margin: 5px; background: rgb(22, 186, 236); color: white; text-align: center; line-height: 100px; } div>span:nth-of-type(4){ position: relative; left: 220px; } div>span:nth-of-type(5){ position: relative; left: 110px; top:110px; } div>span:nth-of-type(6){ position: relative; left: -110px; top:110px; } div>span:nth-of-type(8){ position: relative; left: -110px; top:-110px; } div>span:nth-of-type(9){ cursor: pointer; background: rgb(255, 148, 61); position: relative; left: -110px; top:-110px; } div .aa{ background: rgb(78, 78, 78); } </style> </head> <body> <p id='prize'></p> <div> <span class="aa">手机</span> <span>平板</.........完整代码请登录后点击上方下载按钮下载查看
网友评论0