편집 요약 없음 |
편집 요약 없음 |
||
| 72번째 줄: | 72번째 줄: | ||
.ZCA-hoverB { | .ZCA-hoverB { | ||
filter:brightness(1) contrast(100%); | filter:brightness(1) contrast(100%) blur(1px); | ||
transition: filter 0.5s; | transition: filter 0.5s; | ||
} | } | ||
.ZCA-hoverB:hover { | .ZCA-hoverB:hover { | ||
filter:brightness(1.3) contrast(130%); | filter:brightness(1.3) contrast(130%) blur(0px); | ||
} | } | ||
2023년 9월 30일 (토) 10:36 판
/* # 등장 애니메이션 */
.ZCA-mainimg {
opacity: 0;
animation: ZCA-maintext;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0%);
}
@keyframes ZCA-mainimg {
from {opacity: 0; transform: translateY(-20%);}
to {opacity: 1; transform: translateY(0%);}
}
.ZCA-maintext {
opacity: 0;
animation: ZCA-maintext;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 0.75s;
animation-fill-mode: forwards;
}
@keyframes ZCA-maintext {
from {opacity: 0;}
to {opacity: 1;}
}
.ZCA-subtext1 {
opacity: 0;
animation: ZCA-subtext;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
}
.ZCA-subtext2 {
opacity: 0;
animation: ZCA-subtext;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 0.25s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
}
.ZCA-subtext3 {
opacity: 0;
animation: ZCA-subtext;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
}
@keyframes ZCA-subtext {
from {opacity: 0; transform: translateX(-2%);}
to {opacity: 1; transform: translateX(0%);}
}
/* # 반응 애니메이션 */
.ZCA-hoverB {
filter:brightness(1) contrast(100%) blur(1px);
transition: filter 0.5s;
}
.ZCA-hoverB:hover {
filter:brightness(1.3) contrast(130%) blur(0px);
}