CSS Funstuff: CSS 스피너

모두 안녕!

또 다른 CSS Funstuff 튜토리얼을 볼 시간입니다! 이번에는 순수한 HTML+CSS로 애니메이션 스피너를 만들 것입니다! 하지만 경고해야 합니다. 이것은 평소보다 조금 더 깁니다.

결국 CSS와 함께 작동하는 영역이 함께 제공됩니다.

바로 시작합시다!

1위! 기본 설정:

먼저 항상 그렇듯이 배경의 스타일을 지정하고 몇 가지 기본값을 설정해 보겠습니다. 지금까지 알고 계시겠지만 저는 이 시리즈의 모든 프로젝트에서 동일한 스타일을 사용합니다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(35, 35, 35);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

2nd: HTML로 Spinner 개체 만들기:

우리는 아이러니하게도 다른 모든 것을 위한 컨테이너인 스피너 내부에 하나의 div가 필요합니다. 무엇을 말할 수 있습니까? CSS - 매력적입니다.

<div class="spinner">
</div>

나중에 CSS를 설정하지만 지금은 계속해서 스피너의 나머지 부분을 구성할 div를 추가해 보겠습니다.

<div class="spinner">
   <div class="n-s">
   </div>
   <div class="w-e">
   </div>
   <div class="nw-se">
   </div>
   <div class="sw-ne">
   </div>
</div>

클래스 이름을 다음과 같이 지정했음을 알 수 있습니다.

"n-s"

"w-e"

"nw-se"

"sw-ne"

이 이름은 무작위로 선택되지 않으며, 생각의 한계가 있다면 이름이 무엇을 의미하는지 파악했을 것입니다.

"북쪽->남쪽"

"서쪽->동쪽"

"북서->남동"

"남서->북서"

기본적으로 이들은 스피너의 나머지 부분을 구성하는 의사 요소를 배치할 "탐색 지점"입니다. 이 시점부터는 CSS만 다룰 것입니다.

CSS 재미있는 물건!

먼저 spin 라는 CSS 키프레임 애니메이션을 설정해 보겠습니다. CSS에서 캐스케이딩되는 방식을 항상 염두에 두는 것이 좋습니다. 그것은 스피너 회전을 제공할 뿐만 아니라 .spinner 클래스의 경계를 설정합니다.

@keyframes spin {
  0% {
    border-color: rgba(255, 0, 0, .735);
    transform: rotate(0deg);
  }
  50% {
    border-color: rgba(255, 0, 0, .235);
  }
  100% {
    border-color: rgba(255, 0, 0, .735);
    transform: rotate(360deg);
  }
}

다음으로 .spinner 클래스의 스타일을 지정해 보겠습니다.

.spinner {
  animation: spin 5s linear 0s infinite normal;
  border: 2px solid;
  border-radius: 50%;
  height: 50px;
  position: relative;
  width: 50px;
}

다음에는 pulse라는 다른 애니메이션을 설정합니다.

@keyframes pulse {
  0% {
    opacity: .5;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: .5;
    transform: scale(0);
  }
}

이제 당신은 궁금해 할 것입니다. 이것은 어디로 갈까요? 결국 우리는 이미 .spinner 클래스에 애니메이션을 적용했습니다! 음, 의사 요소가 작동하는 곳입니다.

.spinner::before,
.spinner::after {
  border-radius: 50%;
  content: '';
  inset: 0;
  position: absolute;
}

.spinner::after {
  animation: pulse 1s linear 0s infinite normal;
  border: 1px solid rgba(255, 0, 0, .35);
}

.spinner::before {
  animation: pulse .735s linear .235s infinite normal;
  border: 5px solid rgba(255, 0, 0, .135);
}

이제 필요에 따라 모든 하위 div를 배치합니다.

.spinner div {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 0;
}

이 부분은 보이지 않지만 필수적입니다.

이 시점에서 다음과 같은 항목이 있어야 합니다.



그런 다음 나머지 스피너 애니메이션을 빌드할 것입니다. 약간의 작업이므로 많은 코드를 읽을 준비를 하십시오!

애니메이션 설정:

이전과 마찬가지로 애니메이션을 먼저 다루겠습니다.

@keyframes stretch {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.5);
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

움직이는 모든 부분:

이전에 추가한 네 가지 클래스인 .n-s , .w-e , .sw-ne 및 .nw-se 를 기억하십니까? 음, 마지막 단계는 스타일을 지정하는 것입니다.

.spinner div::before,
.spinner div::after {
  animation: stretch 2s linear 0s infinite;
  animation-fill-mode: both;
  background-color: white;
  content: '';
  height: 15px;
  left: -2.5px;
  position: absolute;
  width: 5px;
  z-index: -1;
}

.spinner div:after {
  top: -50%;
}

.spinner div::before {
  bottom: -50%;
}

.spinner .nw-se,
.spinner .sw-ne,
.spinner .w-e {
  left: 0;
}

.spinner .w-e {
  top: calc(50% - 2.5px);
  transform: rotate(90deg);
}

.spinner .sw-ne {
  transform: rotate(45deg);
}

.spinner .nw-se {
  transform: rotate(-45deg);
}

.spinner .nw-se::before,
.spinner .nw-se::after,
.spinner .sw-ne::before,
.spinner .sw-ne:after {
  left: calc(50% - 2.5px);
  left: calc(50% - 2.5px);
}

.spinner .sw-ne:after {
  animation-delay: .125s;
}

.spinner .w-e:after {
  animation-delay: .25s;
}

.spinner .nw-se:after {
  animation-delay: .35s;
}

.spinner .n-s:before {
  animation-delay: .5s;
}

.spinner .sw-ne:before {
  animation-delay: .65s;
}

.spinner .w-e:before {
  animation-delay: .75s;
}

.spinner .nw-se:before {
  animation-delay: .85s;
}

최종 제품:

모두 말하고 완료하면 다음과 같은 결과를 얻을 수 있습니다.



지금은 여기까지입니다! 하지만 더 있습니다! Download the source code . 이 시리즈에서 자주 하는 것처럼 몇 가지 재미있는 조정으로 소스를 곧 업데이트할 예정이니 잘 살펴보세요!

[내 Gumroad 페이지를 방문하십시오]((https://rolandixor.gumroad.com ) 이와 같은 추가 정보.