Inicio Explorar Axuda
Rexistro Iniciar sesión
wfg
/
lottery
2
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

init

liangzhaozhou hai 7 meses
pai
141bc15637
achega
6d5a389630
Modificáronse 2 ficheiros con 184 adicións e 7 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 184 7
      lottery/dsl.html
  2. BIN=BIN
      lottery/img/blessing.png

+ 184 - 7
lottery/dsl.html
Ver ficheiro 

@@ -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
Ver ficheiro