changzheng-H5/begin.html

<style type="text/css">
	.beginIndex{
		width: 100%;
		height: 100%;
	}
	.beginIndex p.bgmImg {
		width: 100%;
		height: 100%;
	}
	.beginIndex p.bgmImg img {
		width: 100%;
		height: 100%;
	}
	
	.beginIndex  .bgmImg{
		width: 100%;
		height: 100%;
		
	}
	
	.beginIndex .beginBtn img.btn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10%;
		width: 3.44rem;
		height: .83rem;
	}
	.guiz p.title{
		position: absolute;
		top: 15%;
		right: 5%;
		display: flex;
		align-items: center;
	}
	.guiz p.title img{
		width: .41rem;
		height: .23rem;
	}
	.guiz p.title span{
		color: #fff;
		font-size: .26rem;
		padding-left: .1rem;
	}
	/*遮罩*/
	.mask{
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background:url(img/begin.png) no-repeat;
		background-size: 100% 100%;
		 filter: blur(.2rem);
	}
	/*活动规则*/
	.guizBox{
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 9999;
	}
	p.close{
		float: right;
		width: .546rem;
		height: .546rem;
	}
	p.close img{
		width: 100%;
		height: 100%;
	}
	.box_cont{
		margin-top: .65rem;
		background: url(img/guizeBgm.png) no-repeat;
		background-size: 100% 100%;
		width: 10.13rem;
		height: 5.78rem;
		overflow: hidden;
	}
	.box_cont ul{
		width: 8.7rem;
		margin: 1.5rem auto 0;
	}
	.box_cont li{
		display: flex;
	}
	.box_cont li div.contText{
		font-size: .28rem;
		color: #1F444B;
		width: 7.28rem;
		line-height: .46rem;
	}
   .box_cont li p.tips{
		color: #30584D;
		font-size: .28rem;
		font-weight: bold;
	}
	.box_cont li:nth-child(2){
		margin-top: .35rem;
	}
	.box_cont li:nth-child(3){
		margin-top: .4rem;
	}
</style>
<div class="beginIndex">
	<!--<p class="bgmImg"><img src="img/begin.png" /></p>-->
	<!--游戏规则-->
	<div class="guiz">
		<p class="title">
			<img src="img/icon.png"/> <span>查看游戏规则</span>
		</p>
		<div class="guizBox">
			<p class="close"><img src="img/close.png"/></p>
			<div class="box_cont">
				<ul>
					<li>
						<p class="tips">活动时间：</p>
						<div class="contText">
							2021年X月X日 10：00 — 2021年X月X日 23：59
						</div>
					</li>
					<li>
						<p class="tips">活动规则：</p>
						<div class="contText">
							每一关均取自于长征中的经典故事，画面中隐藏着该故事中所包含的线索道具，集齐道具即可通关。每一关所需搜集的线索道具数量会在当前闯关界面进行提示。举例：《飞夺泸定桥》需要找到线索道具为“木板”。
						</div>
					</li>
					<li>
						<p class="tips">参与方式：</p>
						<div class="contText">
							用户可通过微信参与活动。
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--开始-->
	<div class="beginBtn">
		
		<img class="btn" src="img/beginBtn.png" />
	</div>
	<div class="mask"></div>
</div>
<script type="text/javascript">
	$('.close').click(function(){
		$('.mask').fadeOut();
		$('.guizBox').fadeOut()
	})
	$('.title').click(function(){
		$('.mask').fadeIn();
		$('.guizBox').fadeIn()
	})
	$('.beginBtn').click(function(){
		$('.begin').fadeOut(100)
		$('.loading').fadeOut(100)
		$('#game1').fadeIn(500)
	})
</script>