분류
css
통통 튀는 로더 애니메이션을 만듭니다
본문
HTML :
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
CSS :
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
- 이전글border 또는 padding에 의해 폭과 높이가 영향을 받지 않도록 상자 모델을 리셋 18.08.31
- 다음글멋진 주기율표 18.08.29