CSS를 이용한 타이핑 효과

일종의 타이핑 애니메이션이 있는 웹사이트를 이미 보았을 수 있습니다. 보기에는 멋지지만 JS를 사용하지 않고 CSS만 사용하는 것이 아니라 매우 쉽게 수행할 수 있다고 말하면 어떻게 될까요?

우선, 내가 말하는 것을 시각화하자 -

시사

이제 코드를 살펴보겠습니다. 어떻게 하면 그렇게 할 수 있습니까?

HTML

<h1 class="typing">You had me at 'hello'.</h1>

HTML은 매우 간단하므로 이 작업을 수행하기 위해 하나의 요소만 사용하면 됩니다.

CSS

/* Typing Class */
.typing {
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.15em;
  border-right: 0.15em solid orangered;
  animation: typing 3.5s steps(40, end) infinite,
             cursor-blink 0.75s step-end infinite;
}

/* The typing effect for the text */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The cursor  blinking effect */
@keyframes cursor-blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orangered;
  }
}

결론

그만큼 간단합니다. 이제 원하는 곳 어디에서나 프로젝트에서 사용할 수 있습니다. JS로 작동하도록 만들 수도 있지만 그건 다른 이야기입니다.

You can now extend your support by buying me a Coffee.😊👇

또한 읽기