편집 요약 없음 |
편집 요약 없음 |
||
118번째 줄: | 118번째 줄: | ||
.loading::after { | .loading::after { | ||
content: ""; | content: ""; | ||
width: | width: 30px; | ||
height: | height: 30px; | ||
border: 30px solid red; | border: 30px solid red; | ||
border-top-color: white; | border-top-color: white; |
2023년 11월 3일 (금) 20:12 판
/* 변시 인트로 */
.AOCImage {
animation: AOCImage;
animation-iteration-count: 1;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
background-image:linear-gradient(to right, white 0%, transparent 0%);
}
.ACLo-z5 {
z-index:5;
}
.ACLo-z6 {
z-index:6;
}
.AOC-text {
animation: AOC-text;
animation-iteration-count: 2;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes AOC-text {
0% {color: #252525}
50% {color: #CFA547}
100% {color: #252525}
}
.AOC-text2 {
animation: AOC-text2;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0px);
opacity: 1;
}
@keyframes AOC-text2 {
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0px);}
}
.AOC-LDP {
display:inherit;
z-index:6;
animation: AOC-LDP;
animation-delay: 10s;
animation-iteration-count: 1;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: ease;
overflow:hidden;
height:100vh;
opacity:1;
}
@keyframes AOC-LDP {
from {height:100vh;opacity:1; z-index:5;display:inherit;}
to {height:0px;opacity:0; z-index:-1;display:none;}
}
.AOC-bg {
position: relative;
width: 100%;
height: 100vh;
background: #00F1BA;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
overflow: hidden;
z-index:-3;
animation: AOC-bg;
animation-iteration-count: 2;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes AOC-bg {
0% {background: #00F1BA}
50% {background: #580009}
100% {background: #00F1BA}
}
@media screen and (min-width: 768px) {
.AOC-WebDisplay {
display:inherit;
}
}
@media screen and (min-width: 768px) {
.AOC-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 768px) {
.AOC-WebDisplay {
display:none;
}
}
@media screen and (max-width: 768px) {
.AOC-MobileDisplay {
display:inherit;
width: 100%;
}
.loading {
display: flex;
justify-content: center;
}
.loading::after {
content: "";
width: 30px;
height: 30px;
border: 30px solid red;
border-top-color: white;
border-radius: 50%;
animation: loading .800s linear 0s infinite normal;
opacity: 0.6;
}
}
.loading {
display: flex;
justify-content: center;
}
.loading::after {
content: "";
width: 400px;
height: 400px;
border: 30px solid transparent;
border-top-color: white;
border-radius: 50%;
animation: loading .800s linear 0s infinite normal;
opacity: 0.6;
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}