틀:ASU/Loading/styles.css

2023년 10월 1일 (일) 01:27 판 (원본 보기) Lena (토론 | 기여) 편집 요약 없음 ← 이전 편집		2023년 10월 1일 (일) 01:30 판 (원본 보기) Lena (토론 | 기여) 편집 요약 없음 다음 편집 →
91번째 줄:		91번째 줄:
	.ASULoadImage-2 {		.ASULoadImage-2 {
	position: absolute;		position: absolute;
	bottom: 0;		bottom: 0;
	left: 0;		left: 0;
	width: 100%;		width: 100%;
	height: 0;		height: 0;
	background: linear-gradient(180deg, transparent, #ff0000); /* 시작 색상과 끝 색상을 조절하세요 */		background: linear-gradient(180deg, transparent, #ff0000); /* 시작 색상과 끝 색상을 조절하세요 */
	animation: ASULoadImage-2 5s linear forwards; /* 애니메이션 지속 시간과 이징을 조절하세요 */		animation: ASULoadfillOverlay 5s linear forwards;
	}		}
	@keyframes ASULoadImage-2 {		@keyframes ASULoadfillOverlay {
	0% {		0% {
	height: 0;		height: 0;
	}		}
	100% {		100% {
	height: 100%;		height: 100%;
	}		}
	}		}

---

2023년 10월 1일 (일) 01:30 판

.ACLoadingImage {
    animation: ACLoadingImage;
    animation-iteration-count: 1;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    background-image:linear-gradient(to right, white 0.5%, transparent 0.5%);
}
  @keyframes ACLoadingImage {
  0% {background-image:linear-gradient(to right, white 0.5%, transparent 0.5%);}
  10% {background-image:linear-gradient(to right, white 1%, transparent 1%);}
  20% {background-image:linear-gradient(to right, white 2%, transparent 2%);}
  30% {background-image:linear-gradient(to right, white 25%, transparent 25%);}
  40% {background-image:linear-gradient(to right, white 55%, transparent 55%);}
  50% {background-image:linear-gradient(to right, white 60%, transparent 60%);}
  60% {background-image:linear-gradient(to right, white 77%, transparent 77%);}
  70% {background-image:linear-gradient(to right, white 97%, transparent 97%);}
  80% {background-image:linear-gradient(to right, white 98%, transparent 98%);}
  90% {background-image:linear-gradient(to right, white 99%, transparent 99%);}
  100% {background-image:linear-gradient(to right, white 100%, transparent 100%);}
}

.ACLo-z5  {
 z-index:5;
}

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

.ACLoading-LDtext1 {
 animation: ACLoading-LDtext1;
 animation-iteration-count: 2;
 animation-duration: 2s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
 opacity:1;
}

@keyframes ACLoading-LDtext1 {
  from {opacity:1;}
  50% {opacity:0;}
  to {opacity:1;}
}

.ACLoading-LDimg1 {
 animation: ACLoading-LDimg1;
 animation-iteration-count: infinite;
 animation-duration: 3s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
 filter: brightness(0.9);
}

@keyframes ACLoading-LDimg1 {
  from {filter: brightness(0.9);}
  50% {filter: brightness(1.8);}
  to {filter: brightness(0.9);}
}

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

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

.ACLoading-bg  {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #1a1a1f; /* 배경 색상을 원하는 색상으로 설정하세요 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  overflow: hidden;
}

.ASULoadImage-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, transparent, #ff0000); /* 시작 색상과 끝 색상을 조절하세요 */
    animation: ASULoadfillOverlay 5s linear forwards;
}

@keyframes ASULoadfillOverlay {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

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