<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
*{
box-sizing: border-box;
}
body{
background: #eee;
}
.container{
max-width: 500px;
min-height: 100%;
margin:0 auto;
background:red;
text-align: center;
}
.roll-container{
margin-top:20px;
padding:40px 40px;
background: url(bg.png) no-repeat;
background-size:100% 100% ;
}
.flex-row{
display: flex;
margin-bottom:10px;
}
.flex-col{
position: relative;
color:#fff;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex:1;
border-radius:4px ;
}
.flex-col:not(:last-child){
margin-right:10px;
}
.bc-red{
background:red;
}
.bc-green{
background: green;
}
.btn{
cursor:pointer;
}
.btn:hover{
}
.pd-8{
padding:8px;
}
.c-fff{
color:#fff;
}
.jp-png{
height:100%;
width:100%;
border-radius:4px;
}
.mask{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background-color: rgba(252,211,4,0.5);
display: none;
}
.active .mask{
display: block;
}
</style>
</head>
<body>
<div class="container">
<h2 class="c-fff">抽奖</h2>
<div class="pd-8">
<div class="roll-container">
<div class="flex-row">
<div class="flex-col active"><img src="4.jpg" alt="" class="jp-png"/> <div class="mask"></div></div>
<div class="flex-col"><img src="4.jpg" alt="" class="jp-png"/> <div class="mask"></div></div>
<div class="flex-col"><img src="4.jpg" alt="" class="jp-png"/> <div class="mask"></div></div>
</div>
<div class="flex-row">
<div class="flex-col"><img src="4.jpg" alt="" class="jp-png"/><div class="mask"></div></div>
<div class="flex-col btn"><img src="11.jpg" alt="" class="jp-png"/></div>
<div class="flex-col"><img src="4.jpg" alt="" class="jp-png"/><div class="mask"></div></div>
</div>
<div class="flex-row">
<div class="flex-col"><img src="4.jpg" alt="" class="jp-png"/><div class="mask"></div></div>
<div class="flex-col"><img src="4.jpg" alt="" class="jp-png"/><div class="mask"></div></div>
<div class="flex-col"><img src="4.jpg" alt="" class="jp-png"/><div class="mask"></div></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var col = document.querySelectorAll(".flex-col");
drawSquare(col);
function drawSquare(dom){
dom.forEach(function(ele){
ele.style.height=ele.getBoundingClientRect().width +'px';
})
}
window.addEventListener("resize", function(){
drawSquare(col)
});
</script>
</body>
</html>
抽奖代码
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
