CSS에서 팩맨 테마 구분선 만들기

점을 먹고 유령에게 쫓기는 유명한 노란색 공인 팩맨에 대해 모두 알고 계실 것입니다.

저는 이 환상적인 게임의 느낌을 나타내는 멋진 작은HTML 구분선을 만들고 싶었습니다.

최종 결과는 다음과 같습니다.

디바이더 구조 설정

기본 구조를 설정하여 시작하겠습니다.HTML의 구분자는 종종 <hr /> 요소로 표시됩니다.

주제 나누기(수평선)이며 콘텐츠를 구분하는 데 이상적으로 사용할 수 있습니다.

따라서 HTML 섹션에 필요한 것은 다음 코드뿐입니다.

<hr />

이제 스타일을 추가해 보겠습니다. 효과가 조금 더 잘 나타나도록 내 페이지를 검은색으로 만들기로 결정했습니다.

html {
  background: #000;
}

그리고 hr의 경우 기본 테두리를 제거하고 Pac-Man 게임에서 볼 수 있는 점이 될 단일 테두리를 도입하려고 합니다.

hr {
  border: 0;
  width: 100%;
  height: 0;
  border-top: 0.3rem dotted yellow;
  position: relative;
  overflow: visible;
  margin: 2rem 0;
}

지금까지 다음과 같은 결과가 표시되어야 합니다.



이미 익숙해 보이기 시작했을 것입니다, 그렇죠?

이제 Pac-Man 캐릭터를 믹스에 추가해 보겠습니다.
이를 위해 :before pseudo-element 을 사용합니다.

hr:before {
  animation: move 10s infinite linear;
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='571.11' width='541.6'%3E%3Cpath style='fill:%23ffcc00' d='M535.441,412.339A280.868,280.868 0 1,1 536.186,161.733L284.493,286.29Z'/%3E%3C/svg%3E");
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: 100% 0;
  content: ' ';
  height: 24px;
}

꽤 많은 일이 벌어지고 있으니 조금 더 세분화해 보겠습니다.

먼저 move라는 애니메이션을 추가합니다. 이 애니메이션은 영원히 실행되며 10초 동안 지속됩니다.

그런 다음 이:before를 절대 위치 지정 요소로 만들고 모든 측면을 0으로 설정합니다.

팩맨 자체는 인코딩된 SVG를 사용하여 배경 이미지로 설정됩니다.

You can use the following site to encode SVG's

그런 다음 초기 상태를 올바르게 표시하기 위해 몇 가지 배경 속성을 설정합니다.

참고로 content: ' '는 의사 요소를 표시하는 데 필수입니다.

이제 수평선 끝에 Pac-Man이 보일 것입니다.



우리는 움직이는 부분에 도달할 것입니다. 먼저 유령을 소개하겠습니다!
이를 위해 :after pseudo element 을 활용합니다.

hr:after {
  animation: move 10s 1s infinite linear;
  position: absolute;
  top: -14px;
  left:0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 400 444.34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='...");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 100% 0;
  content: ' ';
  height: 24px;
}

보시다시피 거의 같은 개념입니다. 그러나 애니메이션에 1s 지연을 추가하여 유령의 애니메이션이 약간 지연되도록 했습니다.

Note: I cut down the SVG for display purposes. You can find the full one on the CodePen linked on top

이제 남은 일은 다음과 같이 간단하게 이동 애니메이션을 도입하는 것입니다.

@keyframes move {
  0% {
    background-position: 0 0;
  }
}

매우 멋지지만 단순한 Pac-Man 테마 구분선이 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나