편집 요약 없음 |
편집 요약 없음 |
||
| 173번째 줄: | 173번째 줄: | ||
text-indent: -9999em; | text-indent: -9999em; | ||
animation: mulShdSpin 1.3s infinite linear; | animation: mulShdSpin 1.3s infinite linear; | ||
transform: | transform: translate(0%, -50%); | ||
} | } | ||
2023년 11월 26일 (일) 02:05 판
/* 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;
}
}
/* 로딩 애니메이션 */
.loader {
color: #fff;
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.3s infinite linear;
transform: translate(0%, -50%);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0 -3em 0 0.2em,
2em -2em 0 0em, 3em 0 0 -1em,
2em 2em 0 -1em, 0 3em 0 -1em,
-2em 2em 0 -1em, -3em 0 0 -1em,
-2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
-2em 2em 0 -1em, -3em 0 0 -1em,
-2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em,
2em -2em 0 0, 3em 0 0 0.2em,
2em 2em 0 0, 0 3em 0 -1em,
-2em 2em 0 -1em, -3em 0 0 -1em,
-2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
-2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
-2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
-2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
-2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
-2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}