728x90
애니메이션01
오늘은 아래와 같이 두 원이 돌아가는 애니메이션을 만들어 보았습니다.
HTML
<div class="loading">
<span class="circle1"></span>
<span class="circle2"></span>
</div>
CSS
body {
height: 100vh;
background-image: linear-gradient(-60deg, #DBE6F6 0%, #C5796D 100%)
}
/* 위/아래 원 사이 */
.loading {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 150px;
animation: loading 1s ease 100;
}
/* 위에 있는 원 */
.loading .circle1 {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #C5796D;
}
/* 아래에 있는 원 */
.loading .circle2 {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #DBE6F6;
margin-top: 110px;
}
/* 원 애니메이션 */
@keyframes loading {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]SVG animation (4) | 2022.09.07 |
|---|---|
| [CSS]애니메이션03 (2) | 2022.09.02 |
| [CSS]애니메이션01 (4) | 2022.08.29 |
| [CSS]요소 숨기기 (8) | 2022.08.25 |
| [CSS]색상 표현 방법 (4) | 2022.08.23 |
댓글