原生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;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0