init

lottery/index.html

@@ -494,19 +494,160 @@
 		border: 4px solid #eb845a;
 	}
 	.bg_content {
-		height: 100vh;
+		height: calc(100vh + 44rem);
 		width: 100vw;
 		background: url('./img/blessing.png');
 		background-size: cover;
+		margin-top: -44rem;
 	}
 	.show_box{
 		position: absolute;
 		top: 198rem;
-		background: #FFFFFF;
+		//background: #FFFFFF;
 		left: 15rem;
 		right: 15rem;
 		height: 290rem;
 	}
+	.show_box .show_item{
+		width: 20rem;
+		height: 20rem;
+		position: relative;
+		top: 15rem;
+		left: 15rem;
+		display: none;
+	}
+	.show_box .show_item.add_animation_item{
+		display: block;
+		animation: hiddenAvatarItem 0.8s ease-out 2.3s forwards
+	}
+	.show_box .show_item .avatar_box{
+		width: 20rem;
+		height: 20rem;
+		border-radius: 15rem;
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		transform: scale(1);
+	}
+	.show_box .show_item.add_animation_item .avatar_box{
+		animation: showAvatarItem 0.3s ease-out 2s forwards;
+	}
+	.show_box .show_item .avatar_box .avatar{
+		width: 20rem;
+		height: 20rem;
+		object-fit: cover;
+	}
+	.show_box .show_item .info_box{
+		position: absolute;
+		top: -15rem;
+		left: -15rem;
+		z-index: 1;
+		background: rgba(255,255,255,0.8);
+		border-radius: 15rem;
+		border: 1rem solid #FFFFFF;
+		width: 240rem;
+		padding: 15rem;
+		box-sizing: border-box;
+	}
+	.show_box .show_item.add_animation_item .info_box{
+		animation: hiddenItem 0.3s ease-out 2s forwards;
+	}
+	.show_box .show_item.show_img_item .info_box{
+		top: -175rem;
+		left: -15rem;
+	}
+	.show_box .show_item.show_img_item.add_animation_item .info_box{
+		animation: hiddenImgItem 0.3s ease-out 2s forwards;
+	}
+	
+	@keyframes showItem {
+	    0% {
+	        opacity: 0;
+	    }
+	    100% {
+	        opacity: 1;
+	    }
+	}
+	@keyframes showAvatarItem {
+	    0% {
+	        transform: scale(1);
+	    }
+	    100% {
+	        transform: scale(1.5);
+	    }
+	}
+	@keyframes hiddenAvatarItem {
+	    0% {
+	        transform: scale(1.5);
+			opacity: 1;
+	    }
+	    100% {
+	        transform: scale(1.5);
+			opacity: 0;
+			top: 135rem;
+			left: 172rem;
+	    }
+	}
+	@keyframes hiddenItem {
+	    0% {
+	        transform: scale(1);
+			top: -15rem;
+			left: -15rem;
+	    }
+	    100% {
+	        transform: scale(0);
+			left:-110rem;
+			top: -30rem;
+	    }
+	}
+	@keyframes hiddenImgItem {
+	    0% {
+	        transform: scale(1);
+			top: -175rem;
+			left: -15rem;
+	    }
+	    100% {
+	        transform: scale(0);
+			left:-110rem;
+			top: -115rem;
+	    }
+	}
+	
+	.show_box .show_item .info_box .img_box{
+		width: 210rem;
+		height: 150rem;
+		border-radius: 15rem;
+		overflow: hidden;
+		margin-bottom: 10rem;
+		display: none;
+	}
+	.show_box .show_item.show_img_item .info_box .img_box{
+		display: block;
+	}
+	.show_box .show_item .info_box .img_box .info_img{
+		width: 210rem;
+		height: 150rem;
+		object-fit: cover;
+	}
+	.show_box .show_item .info_box .info_text{
+		
+	}
+	.show_box .show_item .info_box .info_text .info_name{
+		font-weight: 500;
+		font-size: 14rem;
+		color: #222222;
+		line-height: 20rem;
+		padding-left: 25rem;
+		margin-bottom: 5rem;
+	}
+	.show_box .show_item .info_box .info_text .info_dsc{
+		font-weight: 400;
+		font-size: 12rem;
+		color: #222222;
+		line-height: 17rem;
+	}
 	.send_btn {
 		width: 100%;
 		position: fixed;
@@ -588,11 +729,17 @@
 	<div id="collectPage">
 		<div class="bg_content">
 			<div class="show_box">
-				<div class="avatar_box">
-					<img class="avatar" src=""/>
+				<div id="showItem" class="show_item">
+					<div class="avatar_box">
+						<img id="avatar" class="avatar" src="./img/prize-bg.png"/>
+					</div>
 					<div class="info_box">
 						<div class="img_box">
-							<img src=""/>
+							<img id="infoImg" class="info_img" src="./img/lottery-bg.png"/>
+						</div>
+						<div class="info_text">
+							<div id="infoName" class="info_name">不爱吃甜：</div>
+							<div id="infoDsc" class="info_dsc">不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜</div>
 						</div>
 					</div>
 				</div>
@@ -932,6 +1079,34 @@
 				}
 			});
 		};
+		function getRandomArbitrary(min, max) {
+		  return Math.floor(Math.random() * (max - min) + min);
+		}
+		function showItem(type){
+			var showItem = document.getElementById('showItem')
+			var infoName = document.getElementById('infoName')
+			var infoDsc = document.getElementById('infoDsc')
+			var avatar = document.getElementById('avatar')
+			avatar.src = ""
+			infoName.innerText = '455'
+			infoDsc.innerText = '455'
+			var  X = getRandomArbitrary(15,125)
+			if(type===1){//无图片
+				showItem.classList.remove("show_img_item")
+				var Y = getRandomArbitrary(15,157)
+			}
+			if(type===2){//有图片
+				showItem.classList.add("show_img_item")
+				var infoImg = document.getElementById('infoImg')
+				infoImg.src = ""
+				var Y = getRandomArbitrary(175,208)
+			}
+			showItem.style.cssText = `top: ${Y}rem; left: ${X}rem;`
+			showItem.classList.add("add_animation_item")
+			setTimeout(()=>{
+				showItem.classList.remove("add_animation_item")
+			},3500)
+		}
 		document.getElementById('sendBtn').addEventListener('click', function() {
 			document.getElementById('dialogText').style.display = 'block';
 		});