편집토론문서 역사

틀:ZC/Loading/styles.css: 두 판 사이의 차이

< 틀:ZC/Loading
편집 요약 없음
편집 요약 없음
태그: 수동 되돌리기
 
(같은 사용자의 중간 판 21개는 보이지 않습니다)
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;
78번째 줄: 78번째 줄:
width:100%;
width:100%;
margin:0px auto;
margin:0px auto;
transform-origin: center center;
}
}


91번째 줄: 92번째 줄:
.ZCL-Animation1 {
.ZCL-Animation1 {
animation-name: ZCL-Animation1;
animation-name: ZCL-Animation1;
animation-duration: 0.5s;
animation-duration: 0.4s;
animation-timing-function: ease;
animation-timing-function: linear;
animation-delay: 0s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-iteration-count: 1;
103번째 줄: 104번째 줄:
}
}
90% {
80% {
transform:scale(0.9);
transform:scale(0.9);
}
}
113번째 줄: 114번째 줄:
.ZCL-Animation2 {
.ZCL-Animation2 {
animation-name: ZCL-Animation2;
animation-name: ZCL-Animation2;
animation-duration: 1.5s;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-timing-function: ease;
animation-delay: 0.6s;
animation-delay: 0.4s;
animation-iteration-count: 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-fill-mode: forwards;
126번째 줄: 127번째 줄:
}
}
90% {
80% {
transform:translateY(2%);
transform:translateY(2%);
opacity:0.6;
opacity:0.6;
138번째 줄: 139번째 줄:
.ZCL-Animation3 {
.ZCL-Animation3 {
animation-name: ZCL-Animation3;
animation-name: ZCL-Animation3;
animation-duration: 1.5s;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-timing-function: ease;
animation-delay: 1.1s;
animation-delay: 0.8s;
animation-iteration-count: 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-fill-mode: forwards;
151번째 줄: 152번째 줄:
}
}
90% {
80% {
transform: translateY(-2%);
transform: translateY(-2%);
opacity:0;
}
}

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;
		}
	}