[CSS] "동 to the 그 to the 라미 애니메이션" 을 만들어봅시다!

codepen을 이용해서 ⚫️동 to the 그 to the 라미~⚪️를 만들어봅시다!

무한으로 회전하는 동그라미 두 개를 HTML과 CSS의 animation 기능을 이용하여 만들어봅시다.
대한민국 국기 느낌으로 만들었는데 이걸 보고 국뽕이 차오르신다면 당신은 진정한 한국인🇰🇷입니다^^.

---

코드 소스를 알아봅시다.💻

✔️HTML

동그라미 두 개의 틀만 만들어주면 됩니다.

<div class="loading">
    <span class="circle1"></span>
    <span class="circle2"></span>
</div>

✔️CSS

∙ linear-gradient : [필수] 시작 색상, 끝 색상 / linear-gradient(각도(deg), 색상1, 색상2 , ..., )
∙ animation : 이름지정, 애니메이션 시간, linear(일정한 속도로 진행), 무한반복

body {
  height: 100vh;
  background-image: linear-gradient(-60deg, white 0%, black 100%)
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 150px; /*두 원 간의 거리*/
  animation: loading 1s ease 100;
}
.loading .circle1 {
  display: block; /*span이 inline이므로*/
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
}
.loading .circle2 {
  display: block; /*span이 inline이므로*/
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: blue;
  margin-top: 110px;
}
@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg)
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg)
  }

---