liangzhaozhou hai 7 meses
pai
achega
6d5a389630
Modificáronse 2 ficheiros con 184 adicións e 7 borrados
  1. 184 7
      lottery/dsl.html
  2. BIN=BIN
      lottery/img/blessing.png

+ 184 - 7
lottery/dsl.html

@@ -75,19 +75,160 @@
 	</head>
 	</head>
 	<style>
 	<style>
 		.bg_content {
 		.bg_content {
-			height: 100vh;
+			height: calc(100vh + 44rem);
 			width: 100vw;
 			width: 100vw;
 			background: url('./img/blessing.png');
 			background: url('./img/blessing.png');
 			background-size: cover;
 			background-size: cover;
+			margin-top: -44rem;
 		}
 		}
 		.show_box{
 		.show_box{
 			position: absolute;
 			position: absolute;
 			top: 198rem;
 			top: 198rem;
-			background: #FFFFFF;
+			//background: #FFFFFF;
 			left: 15rem;
 			left: 15rem;
 			right: 15rem;
 			right: 15rem;
 			height: 290rem;
 			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 {
 		.send_btn {
 			width: 345px;
 			width: 345px;
 			position: fixed;
 			position: fixed;
@@ -97,11 +238,17 @@
 	<body>
 	<body>
 		<div class="bg_content">
 		<div class="bg_content">
 			<div class="show_box">
 			<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="info_box">
 						<div class="img_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>
 					</div>
 				</div>
 				</div>
@@ -109,5 +256,35 @@
 			<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
 			<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
 		</div>
 		</div>
 	</body>
 	</body>
-
-</html>
+	<script type="text/javascript">
+		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)
+		}
+		showItem(2)
+	</script>
+</html>X

BIN=BIN
lottery/img/blessing.png