편집 요약 없음 |
편집 요약 없음 |
||
| 279번째 줄: | 279번째 줄: | ||
/* 로딩 채우기 */ | /* 로딩 채우기 */ | ||
.loading-fill { | .loading-fill { | ||
background: transparent; | |||
animation: loading-fill; | animation: loading-fill; | ||
animation-iteration-count: infinite; | animation-iteration-count: infinite; | ||
animation-duration: 3s; | animation-duration: 3s; | ||
| 311번째 줄: | 289번째 줄: | ||
} | } | ||
@keyframes loading-fill | @keyframes loading-fill { | ||
0% {filter: grayscale(99.5%) drop-shadow(0px 0px 0.5px #8CCD44)} | 0% {filter: grayscale(99.5%) drop-shadow(0px 0px 0.5px #8CCD44)} | ||
10% {filter: grayscale(99%) drop-shadow(0px 0px 1px #8CCD44)} | 10% {filter: grayscale(99%) drop-shadow(0px 0px 1px #8CCD44)} | ||
2023년 10월 1일 (일) 22:45 판
/* 테스트에요 여러분 테스트 */
.ageofchange {
margin-top: 10px;
line-height: 80px;
width: 100%;
animation-name: ageofchange;
font-size: 24pt;
background-color:#580009;
color:#CFA547;
font-family: KoPubDotumMedium;
font-weight: bold;
text-align: center;
animation-duration: 4s;
animation-iteration-count: 1;
}
@keyframes ageofchange {
0% {background-color:#580009; color:#CFA547; left:20px; top:10px;}
50% {background-color:#00F1BA; color:#252525; left:20px; top:10px;}
100% {background-color:#580009; color:#CFA547; left:20px; top:10px;}
}
/* 테스트에요 여러분 테스트 2 */
.animation6 {
margin-top: 10px;
height: 100px;
width: 100%;
border: 1px solid #000000;
overflow: visible;
font-size: 24pt;
text-align: center;
}
.text-animation {
overflow: hidden;
padding-top: 15px;
text-align: center;
font-size: 20pt;
letter-spacing: -0.5px;
animation: text-animation 1s ease;
animation-iteration-count: 1;
transform: translateY(calc(100% - 50%));
}
@keyframes text-animation {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(calc(100% - 50%));
}
}
/* 테스트에요 여러분 테스트 3 */
.header {
display: inline-block;
overflow: hidden;
margin: 10px 10px 10px;
margin-right: -10px;
width: 180px;
height: 300px;
border-radius: 15px;
transform: scale(0.85);
transition: .2s ease-out;
}
.header:hover{
transition: .2s ease-in;
transform: scale(0.9);
z-index:3;
}
.header img {
position: relative;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
overflow: visible;
}
/* 테스트에요 여러분 테스트 4 */
.progress-bar-body {
margin-top: 10px;
margin-bottom: 10px;
height: 20px;
width: 100%;
overflow: hidden;
border-radius: 20px;
}
.progress-bar {
width: 100%;
height: 30px;
background: #dedede;
font-weight: 600;
font-size: .8rem;
}
.progress-bar .progress1 {
width: 75%;
height: 30px;
padding: 0;
text-align: center;
background: #880E4F;
animation: progress 1s ease-in-out 1;
}
@keyframes progress {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
.progress-bar .progress2 {
width: 30%;
height: 30px;
padding: 0;
text-align: center;
background: #880E4F;
animation: progress2 1s ease-in-out 1;
}
@keyframes progress2 {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
/* WSP */
@media screen and (min-width: 768px) {
.wsp-name {
border: 2px solid #EF426F;
margin-left: auto; margin-right: auto;
margin-top: 10px;
line-height: 100px;
text-align: center;
font-size: 24pt;
color: #191919;
width: 100%;
font-family: Noto Serif KR;
letter-spacing: -0.05em;
}
}
@media screen and (max-width: 768px) {
.wsp-name {
border: 2px solid #EF426F;
margin-left: auto; margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
line-height: 80px;
text-align: center;
font-size: 20pt;
color: #191919;
max-width: 768px;
width: 100%;
font-family: Noto Serif KR;
letter-spacing: -0.05em;
}
}
/* ASU 에딧 */
.ACLoadingImage {
animation: ACLoadingImage;
animation-iteration-count: 1;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
background-image:linear-gradient(to right, white 0.5%, transparent 0.5%);
}
@keyframes ACLoadingImage {
0% {background-image:linear-gradient(to right, white 0.5%, transparent 0.5%);}
10% {background-image:linear-gradient(to right, white 1%, transparent 1%);}
20% {background-image:linear-gradient(to right, white 2%, transparent 2%);}
30% {background-image:linear-gradient(to right, white 25%, transparent 25%);}
40% {background-image:linear-gradient(to right, white 55%, transparent 55%);}
50% {background-image:linear-gradient(to right, white 60%, transparent 60%);}
60% {background-image:linear-gradient(to right, white 77%, transparent 77%);}
70% {background-image:linear-gradient(to right, white 97%, transparent 97%);}
80% {background-image:linear-gradient(to right, white 98%, transparent 98%);}
90% {background-image:linear-gradient(to right, white 99%, transparent 99%);}
100% {background-image:linear-gradient(to right, white 100%, transparent 100%);}
}
.ACLo-z5 {
z-index:5;
}
.ACLo-z6 {
z-index:6;
}
.ACLoading-LDtext1 {
animation: ACLoading-LDtext1;
animation-iteration-count: 2;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease;
opacity:1;
}
@keyframes ACLoading-LDtext1 {
from {opacity:1;}
50% {opacity:0;}
to {opacity:1;}
}
.ACLoading-LDimg1 {
animation: ACLoading-LDimg1;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
filter: brightness(1) opacity(100%);
z-index: 7;
}
.ACLoading-LDP {
display:inherit;
z-index:6;
animation: ACLoading-LDP;
animation-delay: 3s;
animation-iteration-count: 1;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: ease;
overflow:hidden;
height:100vh;
opacity:1;
}
@keyframes ACLoading-LDP {
from {height:100vh;opacity:1; z-index:5;display:inherit;}
to {height:0px;opacity:0; z-index:-1;display:none;}
}
.ACLoading-bg {
position: relative;
width: 100%;
height: 100vh;
background: #191919;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
overflow: hidden;
z-index:-3;
}
@media screen and (min-width: 450px) {
.ACLoading-WebDisplay {
display:inherit;
}
}
@media screen and (min-width: 450px) {
.ACLoading-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 450px) {
.ACLoading-WebDisplay {
display:none;
}
}
@media screen and (max-width: 450px) {
.ACLoading-MobileDisplay {
display:inherit;
}
}
/* 로딩 채우기 */
.loading-fill {
background: transparent;
animation: loading-fill;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
filter: grayscale(100%);
transform: translate(0%, -0%);
}
@keyframes loading-fill {
0% {filter: grayscale(99.5%) drop-shadow(0px 0px 0.5px #8CCD44)}
10% {filter: grayscale(99%) drop-shadow(0px 0px 1px #8CCD44)}
20% {filter: grayscale(98%) drop-shadow(0px 0px 2px #8CCD44)}
30% {filter: grayscale(75%) drop-shadow(0px 0px 3px #8CCD44)}
40% {filter: grayscale(55%) drop-shadow(0px 0px 4px #8CCD44)}
50% {filter: grayscale(40%) drop-shadow(0px 0px 5px #8CCD44)}
60% {filter: grayscale(23%) drop-shadow(0px 0px 7px #8CCD44)}
70% {filter: grayscale(3%) drop-shadow(0px 0px 8px #8CCD44)}
80% {filter: grayscale(2%) drop-shadow(0px 0px 9px #8CCD44)}
90% {filter: grayscale(1%) drop-shadow(0px 0px 9.5px #8CCD44)}
100% {filter: grayscale(0%) drop-shadow(0px 0px 10px #8CCD44)}
}