修改

begin.html

@@ -119,7 +119,7 @@
 					<li>
 						<p class="tips">活动时间：</p>
 						<div class="contText">
-							2021年X月X日 10：00 — 2021年X月X日 23：59
+							2021年7月1日  — 2021年7月15日 
 						</div>
 					</li>
 					<li>

css/game1.css

@@ -5,6 +5,16 @@
 .game1Index p.bgm img{
 	width: 100%;
 	height: 100%;
+	
+}
+.game1Index p.bgm img:nth-child(1){
+	opacity: 1;
+}
+.game1Index p.bgm img:nth-child(2){
+	opacity: 0;
+	position: absolute;
+	left: 0;
+	top: 0;
 }
 .game1Index .imgList li{
 	width: 1.21rem;
@@ -75,6 +85,7 @@
 	top: 0;
 	background: url(../img/game1/successBgm.png) no-repeat;
 	background-size: 100% 100%;
+	z-index: 99;
 }
 .game1Index .maskBgm:after {
     content: "";
@@ -106,17 +117,30 @@
 	width: 100%;
 	height: 1.66rem;
 	z-index:-1 ;
+	
+}
+.game1Index div.line div{
+	margin: 0 auto;
+	width: 11rem;
+	height: 100%;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
 .game1Index div.line p{
 	box-sizing: border-box;
-	padding: 0 1.15rem;
 	font-size: .44rem;
 	font-weight: 400;
 	color: #C9C6BA;
-	opacity: 0.41;
+}
+div.line p{
+	width: .42rem;
+	height: .4rem;
+	font-size: 0;
+}
+div.line p img{
+	width: 100%;
+	height: 100%;
 }
 .game1Index div.closeIcon{
 	display: flex;

css/game2.css

@@ -82,6 +82,7 @@
 	top: 0;
 	background: url(../img/game2/successBgm.png) no-repeat;
 	background-size: 100% 100%;
+	z-index: 99;
 }
 .game2Index .maskBgm:after {
     content: "";
@@ -117,13 +118,19 @@
 	justify-content: space-between;
 	align-items: center;
 }
+.game2Index div.line div{
+	margin: 0 auto;
+	width: 11rem;
+	height: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
 .game2Index div.line p{
 	box-sizing: border-box;
-	padding: 0 1.15rem;
 	font-size: .44rem;
 	font-weight: 400;
 	color: #C9C6BA;
-	opacity: 0.41;
 }
 .game2Index div.closeIcon{
 	display: flex;

css/game3.css

@@ -70,6 +70,7 @@
 	top: 0;
 	background: url(../img/game3/successBgm.png) no-repeat;
 	background-size: 100% 100%;
+	z-index: 99;
 }
 .game3Index .maskBgm:after {
     content: "";
@@ -105,13 +106,19 @@
 	justify-content: space-between;
 	align-items: center;
 }
+.game3Index div.line div{
+	margin: 0 auto;
+	width: 11rem;
+	height: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
 .game3Index div.line p{
 	box-sizing: border-box;
-	padding: 0 1.15rem;
 	font-size: .44rem;
 	font-weight: 400;
 	color: #C9C6BA;
-	opacity: 0.41;
 }
 .game3Index div.closeIcon{
 	display: flex;

css/game4.css

@@ -79,6 +79,7 @@
 	top: 0;
 	background: url(../img/game2/successBgm.png) no-repeat;
 	background-size: 100% 100%;
+	z-index: 99;
 }
 .game4Index .maskBgm:after {
     content: "";

css/game5.css

@@ -76,6 +76,7 @@
 	top: 0;
 	background: url(../img/game5/successBgm.png) no-repeat;
 	background-size: 100% 100%;
+	z-index: 99;
 }
 .game5Index .maskBgm:after {
     content: "";
@@ -206,3 +207,18 @@
 }
 
 
+.game5Index .successBox {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 9.53rem;
+	height: 5.83rem;
+	background: url(../img/game5/allWin.png) no-repeat;
+	background-size: 100% 100%;
+	/*display: flex;*/
+	justify-content: center;
+	align-items: flex-end;
+	display: none;
+	z-index: 99;
+}

css/index.css

@@ -220,4 +220,22 @@ p.bgm {
 	background: rgba(0,0,0,.5);
 	z-index: 999999;
 	border-radius: 5px;*/
-}
+}
+p.bgm img{
+	width: 100%;
+	height: 100%;
+	
+}
+ p.bgm img:nth-child(1){
+	opacity: 1;
+}
+p.bgm img:nth-child(2){
+	opacity: 0;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+.textList{
+	transition: all 1s linear;
+}

game1.html

@@ -1,6 +1,9 @@
 <link rel="stylesheet" type="text/css" href="css/game1.css" />
 <div class="game1Index">
-	<p class="bgm"><img src="img/game1/bgm.png" /></p>
+	<p class="bgm">
+		<img src="img/game1/bgm.png" />
+		<img src="img/game1/successBgm.png" />
+	</p>
 	<div class="box_wrap">
 		<ul class="imgList">
 			<li><img style="width: .96rem;" src="img/game1/lin1.png" />
@@ -26,9 +29,10 @@
 	</div>
 	<div class="book_box">
 		<div class="line">
-			<p class="leftIcon">
-				< </p>
-					<p class="rightIcon"> > </p>
+			<div>
+				<p class="leftIcon"><img src="img/leftIcon.png"/> </p>
+				<p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
+			</div>
 		</div>
 		<div class="closeIcon"><img src="img/close.png" /></div>
 		<div class="bookCont">
@@ -60,7 +64,7 @@
 	<!--下一关-->
 	<div class="successBox">
 		<!--<div class="shut"><img src="img/close.png" /></div>-->
-		<p class="above"><img src="img/aboveIcon.png" /></p>
+		<!--<p class="above"><img src="img/aboveIcon.png" /></p>-->
 		<p class="next game1Next"><img src="img/nextIcon.png" /></p>
 	</div>
 </div>
@@ -159,14 +163,21 @@
 		if(num == 3) {
 			console.log('成功')
 			setTimeout(function() {
-				$('.game1Index p.bgm img').attr('src', 'img/game1/successBgm.png')
+//				$('.game1Index p.bgm img').attr('src', 'img/game1/successBgm.png')
+				$('.game1Index p.bgm img').eq(0).animate({
+					'opacity':'0'
+				},1000)
+				$('.game1Index p.bgm img').eq(1).animate({
+					'opacity':'1',
+					'z-index':'99'
+				},1000)
 				$('.game1Index .box_wrap').fadeOut();
 			}, 1500)
 
 			setTimeout(function() {
 				$('.game1Index .book_box').fadeIn()
-				$('.game1Index .maskBgm').fadeIn()
-			}, 2500)
+				$('.game1Index .maskBgm').fadeIn(1000)
+			}, 3500)
 		}
 	}
 	$('.game1Next').click(function(){

game2.html

@@ -1,6 +1,9 @@
 <link rel="stylesheet" type="text/css" href="css/game2.css" />
 <div class="game2Index">
-	<p class="bgm"><img src="img/game2/game2Bgm.png" /></p>
+	<p class="bgm">
+		<img src="img/game2/game2Bgm.png" />
+		<img src="img/game2/successBgm.png"/>
+	</p>
 	<div class="box_wrap">
 		<ul class="imgList">
 			<li><img style="width: .96rem;" src="img/game2/lin1.png" />
@@ -26,9 +29,10 @@
 	</div>
 	<div class="book_box">
 		<div class="line">
-			<p class="leftIcon">
-				< </p>
-					<p class="rightIcon"> > </p>
+			<div>
+				<p class="leftIcon"><img src="img/leftIcon.png"/> </p>
+				<p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
+			</div>
 		</div>
 		<div class="closeIcon"><img src="img/close.png" /></div>
 		<div class="bookCont">
@@ -158,14 +162,20 @@
 		if(num2 == 3) {
 			console.log('成功')
 			setTimeout(function() {
-				$('.game2Index p.bgm img').attr('src', 'img/game2/successBgm.png')
+				$('.game2Index p.bgm img').eq(0).animate({
+					'opacity':'0'
+				},1000)
+				$('.game2Index p.bgm img').eq(1).animate({
+					'opacity':'1',
+					'z-index':'99'
+				},1000)
 				$('.game2Index .box_wrap').fadeOut();
 			}, 1500)
 
 			setTimeout(function() {
 				$('.game2Index .book_box').fadeIn()
-				$('.game2Index .maskBgm').fadeIn()
-			}, 2500)
+				$('.game2Index .maskBgm').fadeIn(1000)
+			}, 3500)
 		}
 	}
 	$('.game2Above').click(function(){

game3.html

@@ -1,6 +1,9 @@
 <link rel="stylesheet" type="text/css" href="css/game3.css" />
 <div class="game3Index">
-	<p class="bgm"><img src="img/game3/bgm.png" /></p>
+	<p class="bgm">
+		<img src="img/game3/bgm.png" />
+		<img src="img/game3/successBgm.png" />
+	</p>
 	<div class="box_wrap">
 		<ul class="imgList">
 			<li><img style="width: .66rem;" src="img/game3/lin1.png" />
@@ -26,9 +29,10 @@
 	</div>
 	<div class="book_box">
 		<div class="line">
-			<p class="leftIcon">
-				< </p>
-					<p class="rightIcon"> > </p>
+			<div>
+				<p class="leftIcon"><img src="img/leftIcon.png"/> </p>
+				<p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
+			</div>
 		</div>
 		<div class="closeIcon"><img src="img/close.png" /></div>
 		<div class="bookCont">
@@ -157,14 +161,20 @@
 		if(num3 == 3) {
 			console.log('成功')
 			setTimeout(function() {
-				$('.game3Index p.bgm img').attr('src', 'img/game3/successBgm.png')
+			$('.game3Index p.bgm img').eq(0).animate({
+					'opacity':'0'
+				},1000)
+				$('.game3Index p.bgm img').eq(1).animate({
+					'opacity':'1',
+					'z-index':'99'
+				},1000)
 				$('.game3Index .box_wrap').fadeOut();
 			}, 1500)
 
 			setTimeout(function() {
 				$('.game3Index .book_box').fadeIn()
-				$('.game3Index .maskBgm').fadeIn()
-			}, 2500)
+				$('.game3Index .maskBgm').fadeIn(1000)
+			}, 3500)
 		}
 	}
 	$('.game3Above').click(function(){

game4.html

@@ -1,6 +1,9 @@
 <link rel="stylesheet" type="text/css" href="css/game4.css" />
 <div class="game4Index">
-	<p class="bgm"><img src="img/game4/game4Bgm.png" /></p>
+	<p class="bgm">
+		<img src="img/game4/game4Bgm.png" />
+		<img src="img/game4/successBgm.png" />
+	</p>
 	<div class="box_wrap">
 		<ul class="imgList">
 			<li><img style="width: .96rem;" src="img/game4/lin1.png" />
@@ -172,13 +175,19 @@
 		if(num4 == 3) {
 			console.log('成功')
 			setTimeout(function() {
-				$('.game4Index p.bgm img').attr('src', 'img/game4/successBgm.png')
+				$('.game4Index p.bgm img').eq(0).animate({
+					'opacity':'0'
+				},1000)
+				$('.game4Index p.bgm img').eq(1).animate({
+					'opacity':'1',
+					'z-index':'99'
+				},1000)
 				$('.game4Index .box_wrap').fadeOut();
 			}, 1500)
 
 			setTimeout(function() {
 				$('.game4Index .book_box').fadeIn()
-				$('.game4Index .maskBgm').fadeIn()
+				$('.game4Index .maskBgm').fadeIn(1000)
 				video4.play()
 			}, 3500)
 		}

game5.html

@@ -1,6 +1,9 @@
 <link rel="stylesheet" type="text/css" href="css/game5.css" />
 <div class="game5Index">
-	<p class="bgm"><img src="img/game5/bgm.png" /></p>
+	<p class="bgm">
+		<img src="img/game5/bgm.png" />
+		<img src="img/game5/successBgm.png" />
+	</p>
 	<div class="box_wrap">
 		<ul class="imgList">
 			<li><img style="width: .96rem;" src="img/game5/lin1.png" />
@@ -59,8 +62,8 @@
 	<!--下一关-->
 	<div class="successBox">
 		<!--<div class="shut"><img src="img/close.png" /></div>-->
-		<p class="above game5Above"><img src="img/aboveIcon.png" /></p>
-		<p class="next game5Next"><img src="img/nextIcon.png" /></p>
+		<!--<p class="above game5Above"><img src="img/aboveIcon.png" /></p>-->
+		<p class="next game5Next"><img src="img/game5/sure.png" /></p>
 	</div>
 </div>
 <script type="text/javascript">
@@ -169,13 +172,19 @@ var video5 = document.getElementById("video5");
 		if(num5 == 3) {
 			console.log('成功')
 			setTimeout(function() {
-				$('.game5Index p.bgm img').attr('src', 'img/game5/successBgm.png')
+				$('.game5Index p.bgm img').eq(0).animate({
+					'opacity':'0'
+				},1000)
+				$('.game5Index p.bgm img').eq(1).animate({
+					'opacity':'1',
+					'z-index':'99'
+				},1000)
 				$('.game5Index .box_wrap').fadeOut();
 			}, 1500)
 
 			setTimeout(function() {
 				$('.game5Index .book_box').fadeIn()
-				$('.game5Index .maskBgm').fadeIn()
+				$('.game5Index .maskBgm').fadeIn(1000)
 				video5.play()
 			}, 3500)
 		}

index.html

@@ -62,7 +62,7 @@
 </html>
 <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 <script>
-	alert('请横屏使用！')
+	alert('建议横屏使用！')
 	$("#begin").load("begin.html");
 	$("#game1").load("game1.html");
 //	$("#game2").load("game2.html");

success.html

@@ -14,6 +14,10 @@
 		left: 50%;
 		top:50%;
 		transform: translate(-50%,-50%);
+		overflow: hidden;
+	}
+	.sucIndex .shi img{
+		margin-left: -6.35rem;
 	}
 </style>
 <div class="sucIndex">
@@ -24,3 +28,8 @@
 	</div>
 </div>
 
+<script type="text/javascript">
+	$('.shi img').animate({
+		'margin-left':'0'
+	},8000)
+</script>