CSS 애니메이션 효과 circle animation

애니메이션 효과 서클

CSS 애니메이션 효과로 공 두개가 돌아가는 모습을 만들었습니다.

HTML

회전축이 될 loading 박스와 공 두개를 만듭니다.

코드 보기

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

CSS

애니메이션 효과를 줍니다.

코드 보기

body{
  height: 100vh;
  background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  
}
.loading{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 150px;
  animation: load 0.6s linear infinite;
}
.loading .circle1{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.loading .circle2{
  width: 20px;
  height: 20px;
  margin-top: 110px;
  border-radius: 50%;
  background: #fff;
}

@keyframes load{
  0%{
    transform:translate(-50%,-50%) rotate(0deg);
  }
  100%{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

결과