편집 요약 없음 |
편집 요약 없음 태그: 수동 되돌리기 |
||
106번째 줄: | 106번째 줄: | ||
} | } | ||
. | .spin-loader { | ||
border-radius: 80%; | |||
display: block; | |||
height: 50px; | |||
width: 50px; | |||
position: relative; | |||
animation: spin .675s linear 0s infinite normal; | |||
} | } | ||
. | .spin-loader:before, | ||
.spin-loader:after { | |||
display: block; | |||
height: | position: absolute; | ||
} | |||
border-radius: 50%; | .spin-loader:before { | ||
border-radius: 0 90px 90px 0; | |||
height: 50px; | |||
} | width: 50%; | ||
top: 0; right: 0; | |||
z-index: 1; | |||
background: black; | |||
background-image: linear-gradient(transparent, black); | |||
} | |||
.spin-loader:after { | |||
border-radius: 80%; | |||
height: 40px; | |||
width: 40px; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
z-index: 1; | |||
background: none; | |||
} | |||
@keyframes | @keyframes spin { | ||
to { | |||
transform: rotate(360deg); | |||
} | |||
} | } |
2023년 11월 3일 (금) 19:02 판
/* 변시 인트로 */
.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-LDtext1 {
animation: AOC-LDtext1;
animation-iteration-count: 2;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease;
opacity:1;
}
@keyframes AOC-LDtext1 {
from {opacity:1;}
50% {opacity:0;}
to {opacity:1;}
}
.AOC-LDimg1 {
animation: AOC-LDimg1;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
filter: brightness(1) opacity(100%);
z-index: 7;
}
.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: 450px) {
.AOC-WebDisplay {
display:inherit;
}
}
@media screen and (min-width: 450px) {
.AOC-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 450px) {
.AOC-WebDisplay {
display:none;
}
}
@media screen and (max-width: 450px) {
.AOC-MobileDisplay {
display:inherit;
}
}
.spin-loader {
border-radius: 80%;
display: block;
height: 50px;
width: 50px;
position: relative;
animation: spin .675s linear 0s infinite normal;
}
.spin-loader:before,
.spin-loader:after {
display: block;
position: absolute;
}
.spin-loader:before {
border-radius: 0 90px 90px 0;
height: 50px;
width: 50%;
top: 0; right: 0;
z-index: 1;
background: black;
background-image: linear-gradient(transparent, black);
}
.spin-loader:after {
border-radius: 80%;
height: 40px;
width: 40px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: none;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}