728x90
애니메이션07
오늘은 아래와 같이 동그라미가 원을 그리며 돌아가는 애니메이션을 만들어 보았습니다.
HTML
큰 div태그에 class="loader"를 입력합니다. loader 안에 div박스 10개를 만들어줍니다.
<div class="loader">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
CSS
애니메이션을 위한 css입니다.
body {
background-color: #ffdde1;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
animation: spin .6s linear infinite reverse;
}
.ball {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
animation: spin 1s infinite ease-in-out;
}
.ball::after {
position: absolute;
content: '';
background-color: #ee9ca7;
width: 5px;
height: 5px;
border-radius: 100%;
top: 0;
}
.ball:nth-child(2){
animation-delay: -0.1s;
}
.ball:nth-child(3){
animation-delay: -0.2s;
}
.ball:nth-child(4){
animation-delay: -0.3s;
}
.ball:nth-child(5){
animation-delay: -0.4s;
}
.ball:nth-child(6){
animation-delay: -0.5s;
}
.ball:nth-child(7){
animation-delay: -0.6s;
}
.ball:nth-child(8){
animation-delay: -0.7s;
}
.ball:nth-child(9){
animation-delay: -0.8s;
}
.ball:nth-child(10){
animation-delay: -0.9s;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]애니메이션08 (6) | 2022.09.26 |
|---|---|
| [CSS]애니메이션06 (3) | 2022.09.22 |
| [CSS]애니메이션05 (2) | 2022.09.21 |
| [CSS]MouseHoverEffect01 (3) | 2022.09.20 |
| [CSS]애니메이션04 (3) | 2022.09.19 |
댓글