저는 Tailwind CSS를 일부 사용하여 제작하였습니다.
대부분 relative/absolute 또는 꾸며주는 css들을 위주로 사용했습니다.
대각선으로 무한하게 움직이는 프로그래스-바
HTML
<div class="w-full h-5 m-3">
<div class="progress-bar"></div>
</div>
CSS
.progress-bar {
min-height: 100%;
width: calc(113px * 4);
background-color: #1dd3d0;
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 5px,
#fff 5px,
#fff 10px
);
animation: slide 3s linear infinite;
will-change: background-position;
}
@media only screen and (max-width: 450px) {
.bar {
width: calc(113px * 3);
}
}
@media only screen and (max-width: 350px) {
.bar {
width: calc(113px * 2);
}
}
@keyframes slide {
from {
background-position-x: 0;
}
to {
background-position-x: 113px;
}
}
좌우로 움직이는 프로그래스-바
HTML
<div class="w-full h-5 m-3 relative border border-black overflow-hidden">
<div class="move-bar absolute bg-cyan-300 w-16 h-full"></div>
</div>
CSS
.move-bar {
animation: moveBox 4s linear infinite alternate-reverse;
}
@keyframes moveBox {
from {
left: -3%;
}
to {
left: 97%;
}
}
반응형
'CSS > css' 카테고리의 다른 글
티스토리 코드블럭 오른쪽 위에 언어 표기하기 (0) | 2022.11.22 |
---|---|
네이밍 케이스(표기법) 정리 (0) | 2022.04.26 |
ul,li 표시자 정리 및 커스텀 하기 (0) | 2022.04.20 |