타자기 효과 CSS

이 기사에서는 CSS에서 타자기 효과를 만들 것입니다!
이 효과를 얻기 위해 JavaScript가 필요하지 않으며 결과는 다음과 같습니다.



좋아, 시작하자!

HTML 설정

HTML에 관해서는 별로 필요하지 않습니다. 조작할 수 있는 단락이나 텍스트 요소만 있으면 됩니다.

<div>
  <p>Beetlejuice, Beetlejuice, Beetlejuice!</p>
</div>

그런 다음 텍스트가 중앙에 오도록 몇 가지 기본 스타일을 빠르게 추가해 보겠습니다.

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

이제 기본 스타일을 추가하여 텍스트를 좀 더 돋보이게 만들 수 있습니다.

p {
  font-size: 2rem;
  font-family: "Courier New";
}

지금쯤이면 다음과 같아야 합니다.

깜박이는 캐럿 추가

끝에 깜박이는 캐럿을 추가하여 시작하겠습니다.
이러한 유형의 캐럿은 대부분의 응용 프로그램에서 타자기 효과를 나타냅니다. 파란색인 iAWriter의 것을 사용하겠습니다.

이와 같이 p 요소의 오른쪽 테두리를 활용하여 이 깜박이는 캐럿을 얻을 수 있습니다.

border-right: .15em solid #18BDEC;

이를 애니메이션화하기 위해 영원히 실행되는 깜박임 애니메이션을 만들어 보겠습니다.

animation: blink 1s steps(1) infinite;

이 깜박임 애니메이션은 테두리 색상을 중간에 투명하게 변경하기만 하면 되므로 매우 간단합니다.

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

애니메이션에 1단계를 추가하여 느린 페이드 대신 빠른 깜박임 효과를 만듭니다.

결과는 다음과 같습니다.

타이핑 효과

이제 실제 타이핑 효과를 적용할 차례입니다.

먼저 p 태그의 너비를 0으로 만들고 다른 줄로 줄바꿈하거나 오버플로를 표시하지 않으려고 합니다.

width: 0;
overflow: hidden;
white-space: nowrap;

그런 다음 애니메이션을 추가하고 싶습니다. 이미 애니메이션이 있으므로 ,를 사용하여 둘을 분리할 수 있습니다.

animation: typing 4s steps(38) 1s 1 normal both, blink 1s steps(1) infinite;

내 단락에는 38자가 있으므로 38단계를 사용했습니다.

이 타이핑 애니메이션이 어떻게 보여야 하는지 살펴보겠습니다.

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

예, 그게 다입니다. 너비가 0에서 100%인 단순한 애니메이션입니다.
그리고 그것은 우리가 찾고 있는 멋진 타자기 효과를 줄 것입니다.

애니메이션을 텍스트와 글꼴에 맞추려면 애니메이션 설정을 가지고 놀아야 할 수도 있습니다.

기간( 4s )과 가장 적합한 단계를 가지고 놀아 보십시오.

이 기사를 즐기고 새로운 것을 배웠기를 바랍니다.
당신의 창작물을 Twitter에서 저와 공유하세요! 👀⌨️

읽어주셔서 감사합니다. 연결해 보겠습니다!

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