no message
							parent
							
								
									60e47f93df
								
							
						
					
					
						commit
						c6242d4681
					
				|  | @ -44,10 +44,10 @@ | ||||||
| } | } | ||||||
| @keyframes scale{ | @keyframes scale{ | ||||||
| 	0%{ | 	0%{ | ||||||
| 		transform: scale(.9);  | 		transform: scale(1);  | ||||||
| 	} | 	} | ||||||
| 	100%{ | 	100%{ | ||||||
| 		transform: scale(.91);  | 		transform: scale(1.02);  | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| @keyframes blendmode{ | @keyframes blendmode{ | ||||||
|  |  | ||||||
|  | @ -137,20 +137,26 @@ body{ | ||||||
| 	width: 100%; | 	width: 100%; | ||||||
| 	height: 101vh; | 	height: 101vh; | ||||||
| 	position: absolute; | 	position: absolute; | ||||||
| 	background: url(../image/img_01.png) no-repeat; | 	background: url(../image/img_01.png) no-repeat ; | ||||||
|  | 	background-size: 1920px 1080px; | ||||||
|  | 	background-position: 0 -3.125rem; | ||||||
|  | 	z-index: 2; | ||||||
| } | } | ||||||
| .scale-body{ | .scale-body{ | ||||||
| 	width: 100%; | 	width: 100%; | ||||||
| 	height: 101vh; | 	height: 101vh; | ||||||
| 	position: absolute; | 	position: absolute; | ||||||
| 	background: url(../image/img_01.png) no-repeat; | 	background: url(../image/img_01.png) no-repeat bottom; | ||||||
|  | 	background-size: 1920px 1080px; | ||||||
|  | 	background-position: 0 -3.125rem; | ||||||
| 	animation: scale-body .6s linear infinite; | 	animation: scale-body .6s linear infinite; | ||||||
| } | } | ||||||
| .lighting-bg{ | .lighting-bg{ | ||||||
| 	position: fixed; | 	position: fixed; | ||||||
| 	top: 0.5rem; | 	top: 0rem; | ||||||
| 	mix-blend-mode: lighten;  | 	mix-blend-mode: lighten;  | ||||||
| 	display: none; | 	display: none; | ||||||
|  | 	z-index: 2; | ||||||
| } | } | ||||||
| .fireworks{ | .fireworks{ | ||||||
| 	display: block!important; | 	display: block!important; | ||||||
|  | @ -199,20 +205,21 @@ body{ | ||||||
| 	width: 100%; | 	width: 100%; | ||||||
| } | } | ||||||
| .stage .sound{ | .stage .sound{ | ||||||
| 	width:1178px; | 	width:770px; | ||||||
| 	height: 347px; | 	height: 190px; | ||||||
| 	margin: 0 auto; | 	margin: 0 auto; | ||||||
| 	position: relative; | 	position: relative; | ||||||
| 	margin-top: -220px; | 	margin-top: -120px; | ||||||
|  | 	z-index: 2; | ||||||
| } | } | ||||||
| .stage .sound img{ | .stage .sound img{ | ||||||
| 	width: 100%; | 	width: 100%; | ||||||
| 	animation: scale .4s linear infinite; | 	animation: scale .2s linear infinite; | ||||||
| } | } | ||||||
| .stage .leading{ | .stage .leading{ | ||||||
| 	width: 203px; | 	width: 356px; | ||||||
| 	position: relative; | 	position: relative; | ||||||
| 	margin: -250px auto 0; | 	margin: -220px auto 0; | ||||||
| } | } | ||||||
| .stage .leading .leading-dancer{ | .stage .leading .leading-dancer{ | ||||||
| 	width: 120px; | 	width: 120px; | ||||||
|  | @ -224,7 +231,7 @@ body{ | ||||||
| 	position: relative; | 	position: relative; | ||||||
| } | } | ||||||
| .stage .leading .table{ | .stage .leading .table{ | ||||||
| 	margin-top: -25px; | 	margin-top: -35px; | ||||||
| } | } | ||||||
| .stage .leading .table img{ | .stage .leading .table img{ | ||||||
| 	max-width: 100%; | 	max-width: 100%; | ||||||
|  | @ -233,7 +240,7 @@ body{ | ||||||
| 	color: #ffd800; | 	color: #ffd800; | ||||||
| 	font-size: 16px; | 	font-size: 16px; | ||||||
| 	text-align: center; | 	text-align: center; | ||||||
| 	margin-top: -36px; | 	margin-top: -66px; | ||||||
| } | } | ||||||
| .speak{ | .speak{ | ||||||
| 	position: fixed; | 	position: fixed; | ||||||
|  | @ -268,11 +275,12 @@ body{ | ||||||
| 	color: #FFFFFF; | 	color: #FFFFFF; | ||||||
| 	margin: -78px auto 0; | 	margin: -78px auto 0; | ||||||
| 	display: none; | 	display: none; | ||||||
| 	min-width: 160px; | 	min-width: 356px; | ||||||
| } | } | ||||||
| .speak.speak-pink::after{ | .speak.speak-pink::after{ | ||||||
| 	background: url(../image/icon_03.png) no-repeat; | 	background: url(../image/icon_03.png) no-repeat; | ||||||
| 	left:60px; | 	left:60px; | ||||||
|  | 	 | ||||||
| } | } | ||||||
| .types{ | .types{ | ||||||
| 	font-size: 24px; | 	font-size: 24px; | ||||||
|  | @ -297,9 +305,10 @@ body{ | ||||||
| .dance-floor-box{ | .dance-floor-box{ | ||||||
| 	position: fixed; | 	position: fixed; | ||||||
| 	left: 150px; | 	left: 150px; | ||||||
| 	width:calc(100% - 300px); | 	width:calc(100% - 280px); | ||||||
| 	height: calc(100vh - 410px); | 	height: calc(100vh - 410px); | ||||||
| 	z-index: 9999; | 	z-index: 9999; | ||||||
|  | 	bottom: 100px; | ||||||
| } | } | ||||||
| .dance-floor{ | .dance-floor{ | ||||||
| 	position: relative; | 	position: relative; | ||||||
|  | @ -470,3 +479,12 @@ body{ | ||||||
| 	width: 100%; | 	width: 100%; | ||||||
| 	background: rgba(0,0,0,.2); | 	background: rgba(0,0,0,.2); | ||||||
| } | } | ||||||
|  | .video-bg{ | ||||||
|  | 	width: 1920px; | ||||||
|  | 	position: absolute; | ||||||
|  | 	top: -50%; | ||||||
|  | 	left: 0; | ||||||
|  | } | ||||||
|  | .video-bg video{ | ||||||
|  | 	width: 1920px; | ||||||
|  | } | ||||||
							
								
								
									
										13
									
								
								dancing.html
								
								
								
								
							
							
						
						
									
										13
									
								
								dancing.html
								
								
								
								
							|  | @ -39,8 +39,8 @@ | ||||||
| 						<img src="image/icon_02.png" /> | 						<img src="image/icon_02.png" /> | ||||||
| 					</div> | 					</div> | ||||||
| 					<div class="leading"> | 					<div class="leading"> | ||||||
| 						<div class="speak speak-pink"></div> | 						<div class="speak speak-pink" ></div> | ||||||
| 						<div class="leading-dancer dancing-wobble-right"> | 						<div class="leading-dancer dancing-right"> | ||||||
| 							<div class="stick stick-06 stick-swing-big "></div> | 							<div class="stick stick-06 stick-swing-big "></div> | ||||||
| 						</div> | 						</div> | ||||||
| 						<div class="table"> | 						<div class="table"> | ||||||
|  | @ -56,13 +56,16 @@ | ||||||
| 				<!--当前舞池动作: dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right--> | 				<!--当前舞池动作: dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right--> | ||||||
| 				<div class="dance-floor-box"> | 				<div class="dance-floor-box"> | ||||||
| 			<div class="dance-floor"> | 			<div class="dance-floor"> | ||||||
| 			 |  | ||||||
| 			 |  | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
|  | 	</div> | ||||||
|  | </div> | ||||||
| 		<!--小纸片氛围js--> | 		<!--小纸片氛围js--> | ||||||
| 		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> | 		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> | ||||||
| 		<!--小纸片氛围js--> | 		<!--小纸片氛围js--> | ||||||
| 		 | 		<!--视频灯光--> | ||||||
|  | 		<div class="video-bg"> | ||||||
|  | 			<video  loop autoplay muted src="https://bili.scdxtc.cn/video/img-bg.mp4" ></video> | ||||||
|  | 		</div> | ||||||
| 	</body> | 	</body> | ||||||
| </html> | </html> | ||||||
|  |  | ||||||
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 68 KiB | 
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 72 KiB | 
							
								
								
									
										
											BIN
										
									
								
								image/img_01.png
								
								
								
								
							
							
						
						
									
										
											BIN
										
									
								
								image/img_01.png
								
								
								
								
							
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 331 KiB After Width: | Height: | Size: 87 KiB | 
		Loading…
	
		Reference in New Issue