(새 문서: →Proitem 애니메이션: .wip-stripe-layer { position: absolute !important; top: 0 !important; left: -280px !important; width: calc(100% + 560px) !important; height: 100% !important; opacity: 0.08 !important; background: repeating-linear-gradient( 45deg, #969696, #969696 10px, transparent 10px, transparent 20px ) !important; z-index: 0 !important; } .wip-active .wip-stripe-layer { animation: wip...) |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
/* Proitem 애니메이션 */ | /* Proitem 애니메이션 */ | ||
.wip-stripe-layer { | css.wip-stripe-layer { | ||
position: absolute | position: absolute; | ||
top: 0 | top: 0; | ||
left: -280px | left: -280px; | ||
width: calc(100% + 560px) | width: calc(100% + 560px); | ||
height: 100% | height: 100%; | ||
opacity: 0.08 | opacity: 0.08; | ||
background: repeating-linear-gradient( | background: repeating-linear-gradient( | ||
45deg, | 45deg, | ||
| 13번째 줄: | 13번째 줄: | ||
transparent 10px, | transparent 10px, | ||
transparent 20px | transparent 20px | ||
) | ); | ||
z-index: 0 | z-index: 0; | ||
} | } | ||
.wip-active .wip-stripe-layer { | .wip-active .wip-stripe-layer { | ||
animation: wip-stripe-move 8s linear infinite | animation: wip-stripe-move 8s linear infinite; | ||
} | } | ||
.wip-standby .wip-stripe-layer { | .wip-standby .wip-stripe-layer { | ||
animation: none | animation: none; | ||
} | } | ||
@keyframes wip-stripe-move { | @keyframes wip-stripe-move { | ||
2026년 4월 18일 (토) 18:08 판
/* Proitem 애니메이션 */
css.wip-stripe-layer {
position: absolute;
top: 0;
left: -280px;
width: calc(100% + 560px);
height: 100%;
opacity: 0.08;
background: repeating-linear-gradient(
45deg,
#969696,
#969696 10px,
transparent 10px,
transparent 20px
);
z-index: 0;
}
.wip-active .wip-stripe-layer {
animation: wip-stripe-move 8s linear infinite;
}
.wip-standby .wip-stripe-layer {
animation: none;
}
@keyframes wip-stripe-move {
from { transform: translateX(0); }
to { transform: translateX(280px); }
}