편집 요약 없음 |
편집 요약 없음 |
||
99번째 줄: | 99번째 줄: | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | } | ||
2023년 10월 1일 (일) 01:36 판
.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;
}
.image-container {
position: relative;
width: 300px; /* 이미지 크기에 맞게 조절하세요 */
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
@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;
}
}