편집토론문서 역사

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

< 틀:ASU/Loading
편집 요약 없음
편집 요약 없음
20번째 줄: 20번째 줄:
   }
   }


  .IM-POLD-LDtext1 {
.IM-PO-z5  {
    animation: IM-POLD-LDtext1;
z-index:5;
    animation-iteration-count: 2;
}
    animation-duration: 2s;
 
    animation-fill-mode: forwards;
.IM-PO-z6  {
    animation-timing-function: ease;
z-index:6;
    opacity:1;
}
  }
 
 
.IM-POLD-LDtext1 {
  @keyframes IM-POLD-LDtext1 {
animation: IM-POLD-LDtext1;
    from {opacity:1;}
animation-iteration-count: 2;
    50% {opacity:0;}
animation-duration: 2s;
    to {opacity:1;}
animation-fill-mode: forwards;
  }
animation-timing-function: ease;
opacity:1;
}
 
@keyframes IM-POLD-LDtext1 {
  from {opacity:1;}
  50% {opacity:0;}
  to {opacity:1;}
}
 
.IM-POLD-LDimg1 {
animation: IM-POLD-LDimg1;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
filter: brightness(0.9);
}
 
@keyframes IM-POLD-LDimg1 {
  from {filter: brightness(0.9);}
  50% {filter: brightness(1.8);}
  to {filter: brightness(0.9);}
}
 
.IM-POLD-LDP {
display:inherit;
z-index:5;
animation: IM-POLD-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;
}


   .ACLoadingPage {
@keyframes IM-POLD-LDP {
    display:inherit;
   from {height:100vh;opacity:1; z-index:5;display:inherit;}
    z-index:5;
  to {height:0px;opacity:0; z-index:-1;display:none;}
    animation: ACLoadingPage;
}
    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 ACLoadingPage {
.IM-POLD-bgnoise  {
    from {height:100vh;opacity:1; z-index:5;display:inherit;}
animation: IM-POLD-bgnoise;
    to {height:0px;opacity:0; z-index:-1;display:none;}
animation-iteration-count: infinite;
  }
animation-duration: 1s;
animation-timing-function: ease;
animation-fill-mode: backwards;
}
@keyframes IM-POLD-bgnoise {
  0% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
  15% {background:#363636; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%,  rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
  45% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%,  rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
  50% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
  75% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%,  rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
  80% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%,  rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
  100% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
}


@media screen and (min-width: 450px) {
@media screen and (min-width: 450px) {
60번째 줄: 100번째 줄:
}
}
@media screen and (min-width: 450px) {
@media screen and (min-width: 450px) {
.ACLoading-MobileDisplay {
.IM-POLD-MobileDisplay {
     display:none;
     display:none;
}
}
70번째 줄: 110번째 줄:
}
}
@media screen and (max-width: 450px) {
@media screen and (max-width: 450px) {
.ACLoading-MobileDisplay {
.IM-POLD-MobileDisplay {
     display:inherit;
     display:inherit;
}
}
}
}

2023년 9월 30일 (토) 22:02 판

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

.IM-PO-z5  {
 z-index:5;
}

.IM-PO-z6  {
 z-index:6;
}

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

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

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

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

.IM-POLD-LDP {
 display:inherit;
 z-index:5;
 animation: IM-POLD-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 IM-POLD-LDP {
  from {height:100vh;opacity:1; z-index:5;display:inherit;}
  to {height:0px;opacity:0; z-index:-1;display:none;}
}

.IM-POLD-bgnoise  {
 animation: IM-POLD-bgnoise;
 animation-iteration-count: infinite;
 animation-duration: 1s;
 animation-timing-function: ease;
 animation-fill-mode: backwards;
}
@keyframes IM-POLD-bgnoise {
  0% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
  15% {background:#363636; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%,  rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
  45% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%,  rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
  50% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
  75% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%,  rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
  80% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%,  rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
  100% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
}

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