[CSS] 원 2개가 시계방향으로 회전하는 애니메이션 만들기

원 2개가 돌아가는 애니메이션 만들기⚪

이번 포스팅에서는 동그라미 2개가 시계방향으로 계속 돌아가는 간단한 애니메이션을 만들어보도록 하겠다.

HTML 코드

loading 클래스값을 가진 div 안에 circle1, circle2 클래스값을 가진 span 태그 2개를 종속시킨다.

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

CSS 코드

linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다.

body {
  height: 100vh;
  background-image: linear-gradient(-60deg, darkorchid 0%, lightpink 100%);
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 150px;
  animation: loading 1s ease infinite;
}
.loading .circle1 {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.loading .circle2 {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 110px;
  border-radius: 50%;
  background: #fff;
}
@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

결과물

완~성🥰