틀:ZC/Loading/styles.css

2023년 11월 13일 (월) 13:01 판 (원본 보기) Lena (토론 | 기여) 편집 요약 없음 ← 이전 편집		2023년 11월 26일 (일) 02:20 기준 최신판 (원본 보기) Lena (토론 | 기여) 편집 요약 없음 태그: 수동 되돌리기
(같은 사용자의 중간 판 9개는 보이지 않습니다)
14번째 줄:		14번째 줄:
	z-index:6;		z-index:6;
	animation: ZCLoading-LDP;		animation: ZCLoading-LDP;
	animation-delay: 3.5s;		animation-delay: 2s;
	animation-iteration-count: 1;		animation-iteration-count: 1;
	animation-duration: 0.4s;		animation-duration: 0.4s;
159번째 줄:		159번째 줄:
	transform: translateY(0%);		transform: translateY(0%);
	opacity:0.6;		opacity:0.6;
	}
	}
	.ZCL-Animation4 {
	animation-name: ZCL-Animation4;
	animation-duration: 0.8s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	transform:rotate(0);
	}
	@keyframes ZCL-Animation4 {
	0% {
	transform:rotate(180deg) translateY(25%) scale(1.5);;
	}
	80% {
	transform: rotate(-10deg) translateY(-2%);
	}
	100% {
	transform: rotate(0deg) translateY(0%) scale(1.2);
	}		}
	}		}

---

2023년 11월 26일 (일) 02:20 기준 최신판

/* Z축 */
.ZCLo-z5  {
 z-index:5;
}

.ZCLo-z6  {
 z-index:6;
}

/* 로딩 화면 애니메이션 */

.ZCLoading-LDP {
 display:inherit;
 z-index:6;
 animation: ZCLoading-LDP;
 animation-delay: 2s;
 animation-iteration-count: 1;
 animation-duration: 0.4s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
 overflow:hidden;
 height:100vh;
 opacity:1;
}

@keyframes ZCLoading-LDP {
  from {height:100vh;opacity:1; z-index:5;display:inherit;}
  to {height:0px;opacity:0; z-index:-1;display:none;}
}

/* 로딩 화면 배경 */

.ZCLoading-bg  {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #1a1a1f;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  overflow: hidden;
  
  z-index:-3;
}


/*    # 모바일 반응성    */

@media screen and (min-width: 700px) {
	.ZCLoading-WebDisplay {
    	display:inherit;
	}
}
@media screen and (min-width: 700px) {
	.ZCLoading-MobileDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.ZCLoading-WebDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.ZCLoading-MobileDisplay {
    	display:inherit;
	}
}

/*    로고 애니메이션    */

	.ZCL-container1 {
		position: absolute;
		transform: translate(0%, -50%);
		opacity:.6;
		top:250px;
		width:100%;
		margin:0px auto;
		transform-origin: center center;
	}

	.ZCL-container2 {
		position: absolute;
		transform: translate(0%, -50%);
		opacity:0;
		top:250px;
		width:100%;
		margin:0px auto;
	}

	.ZCL-Animation1 {
		animation-name: ZCL-Animation1;
		animation-duration: 0.4s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		transform:rotate(0);
	}
	@keyframes ZCL-Animation1 {
		0% {
			transform:scale(1.5);
			
		}
		80% {
			transform:scale(0.9);
		}
		100% {
			transform:scale(1);
		}
	}

		.ZCL-Animation2 {
		animation-name: ZCL-Animation2;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-delay: 0.4s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		transform:rotate(0);
	}
	@keyframes ZCL-Animation2 {
		0% {
			transform:translateY(-25%);;
			opacity:0;
			
		}
		80% {
			transform:translateY(2%);
			opacity:0.6;
		}
		100% {
			transform:translateY(0%);
			opacity:0.6;
		}
	}

		.ZCL-Animation3 {
		animation-name: ZCL-Animation3;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-delay: 0.8s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		transform:rotate(0);
	}
	@keyframes ZCL-Animation3 {
		0% {
			transform: translateY(25%);
			opacity:0;
			
		}
		80% {
			transform: translateY(-2%);
			
		}
		100% {
			transform: translateY(0%);
			opacity:0.6;
		}
	}