(새 문서: →Z축: .ZCLo-z5 { z-index:5; } .ZCLo-z6 { z-index:6; } →로딩 화면 애니메이션: .ZCLoading-LDP { display:inherit; z-index:6; animation: ZCLoading-LDP; animat...) |
편집 요약 없음 |
||
| 92번째 줄: | 92번째 줄: | ||
animation-name: ZCL-Animation1; | animation-name: ZCL-Animation1; | ||
animation-duration: 0.6s; | animation-duration: 0.6s; | ||
animation-timing-function: | animation-timing-function: linear; | ||
animation-delay: 0s; | animation-delay: 0s; | ||
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
| 111번째 줄: | 111번째 줄: | ||
animation-name: ZCL-Animation2; | animation-name: ZCL-Animation2; | ||
animation-duration: 1.5s; | animation-duration: 1.5s; | ||
animation-timing-function: | animation-timing-function: linear; | ||
animation-delay: 0.6s; | animation-delay: 0.6s; | ||
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
| 122번째 줄: | 122번째 줄: | ||
opacity:0; | opacity:0; | ||
} | |||
95% { | |||
transform:translateY(-1%); | |||
opacity:0.6; | |||
} | } | ||
100% { | 100% { | ||
| 132번째 줄: | 136번째 줄: | ||
animation-name: ZCL-Animation3; | animation-name: ZCL-Animation3; | ||
animation-duration: 1.5s; | animation-duration: 1.5s; | ||
animation-timing-function: | animation-timing-function: linear; | ||
animation-delay: 1.1s; | animation-delay: 1.1s; | ||
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
2023년 11월 13일 (월) 07:44 판
/* Z축 */
.ZCLo-z5 {
z-index:5;
}
.ZCLo-z6 {
z-index:6;
}
/* 로딩 화면 애니메이션 */
.ZCLoading-LDP {
display:inherit;
z-index:6;
animation: ZCLoading-LDP;
animation-delay: 3.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;
}
.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.6s;
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);
}
100% {
transform:scale(1);
}
}
.ZCL-Animation2 {
animation-name: ZCL-Animation2;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-delay: 0.6s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transform:rotate(0);
}
@keyframes ZCL-Animation2 {
0% {
transform:translateY(-25%);;
opacity:0;
}
95% {
transform:translateY(-1%);
opacity:0.6;
}
100% {
transform:translateY(0%);
opacity:0.6;
}
}
.ZCL-Animation3 {
animation-name: ZCL-Animation3;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-delay: 1.1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transform:rotate(0);
}
@keyframes ZCL-Animation3 {
0% {
transform: translateY(25%);
opacity:0;
}
100% {
transform: translateY(0%);
opacity:0.6;
}
}