웹 사이트에 CSS 타자기 효과를 만드는 방법-CSS 튜토리얼-php.cn

~~순수한 CSS는 매력적인 타자기 텍스트 효과~~

를 만듭니다

코어 포인트 :

CSS 타자기 효과는 텍스트를 점차적으로 표시하여 웹 사이트 콘텐츠를보다 역동적이고 매력적으로 만들고 로그인 페이지, 개인 웹 사이트 및 코드 데모에 사용할 수 있습니다. CSS

함수를 사용하여 텍스트 요소의 너비를 0%에서 100%로 변경하고 애니메이션을 통해 텍스트의 커서를 시뮬레이션함으로써 타자기 효과를 만들 수 있습니다.

텍스트가 길거나 짧은 텍스트를 수용하기 위해 타이핑 애니메이션의 단계 수와 지속 시간을 늘리거나 감소시켜 타이핑 효과를 조정할 수 있습니다.

타이프 워리 효과는 깜박이는 커서 애니메이션과 함께 효과를 향상시킬 수 있으며,

특성, 색상, 깜박임 주파수 등을 조정하여 커서를 사용자 정의 할 수 있습니다. steps()

이 기사에서는 순수한 CSS를 사용하여 역동적이고 매력적인 웹 사이트 타자기 효과를 만드는 방법을 안내합니다.

타자기 효과 시뮬레이션 텍스트는 앞에서 실시간으로 입력하는 것처럼 단어별로 단어로 표시됩니다.

border-right 텍스트 스 니펫에 타자기 효과를 추가하면 웹 사이트 방문자를 유치하고 계속 읽는 데 관심이 있습니다. 타이프 리터 효과는 매력적인 로그인 페이지 만들기, 호출 문안 요소, 개인 웹 사이트 및 코드 프레젠테이션과 같은 다양한 목적으로 사용할 수 있습니다.

타자기 효과를 쉽게 만들 수 있습니다 타자기 효과를 만드는 것은 매우 간단합니다.이 자습서를 이해하려면 CSS 및 CSS 애니메이션에 대한 기본 지식 만 있으면됩니다.

타자기 효과의 작동 원리는 다음과 같습니다.

타자기 애니메이션은 CSS 함수를 사용하여 텍스트 요소의 너비를 0%에서 100%로 점차 변경하여 텍스트 요소를 표시합니다.

깜박이는 애니메이션은 텍스트의 "putout"커서를 시뮬레이션합니다.

타자기 효과 웹 페이지를 만듭니다 먼저 타자기 데모를위한 웹 페이지를 만들어 봅시다. 클래스 이름 : 인 타자기 텍스트 용 컨테이너가 포함됩니다.

타자기 텍스트 컨테이너의 스타일 스타일 이제 웹 페이지의 레이아웃이 있었으므로 "타이핑"클래스를 사용하여

의 스타일을합시다 :

타자기 효과를 효과적으로 만들기 위해 다음을 추가했습니다.

및

타이핑 효과가 시작될 때까지 텍스트 내용이 표시되지 않도록하십시오.

, 타자기 커서를 만듭니다.

타이핑 효과를 만들기 전에 요소의 마지막 문자가 타이핑 기 또는 워드 프로세서와 같이 완전히 입력 한 후 커서를 정지시키기 전에

: steps() 디스플레이 텍스트 애니메이션 생성

typewriter 애니메이션은 요소 내의 텍스트에 대한 구두 효과를 만듭니다. 우리는 CSS 애니메이션 규칙을 사용합니다 :

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

로그인 후 복사

알다시피,이 애니메이션은 요소의 너비를 0%에서 100%로 변경하는 것입니다.

이제, 우리는이 애니메이션을 우리의 클래스에 포함시키고 애니메이션 방향을

로 설정하여 애니메이션이 끝난 후 텍스트 요소가

로 돌아 오지 않도록합니다. typed-out 우리의 텍스트 요소는 왼쪽에서 오른쪽으로 부드럽게 표시됩니다. 타자기 효과를 달성하기위한 단계를 추가하십시오 지금까지 우리의 텍스트가 표시되었지만 텍스트를 표시하지 않는 부드러운 방법입니다. 이것은 시작이지만 분명히 타자기 효과처럼 보이지 않습니다. forwards 이 애니메이션이 텍스트 요소를 구두로 표시하거나 단계별로 (타자기처럼) <🎜 🎜> 클래스에 포함 된 타이핑 애니메이션을 단계로 분할하여 타이핑을 입력하는 것처럼 보일 것입니다. . 이곳은 CSS width: 0 기능이 수행되는 곳입니다.

보시다시피, 우리는 CSS

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

로그인 후 복사

기능을 사용하여 타이핑 애니메이션을 20 단계로 나눕니다.

더 긴 타이핑 <🎜 🎜>에 대한 단계를 조정하십시오 더 긴 텍스트를 조정하려면 타이핑 애니메이션의 단계와 지속 시간을 늘려야합니다.

더 짧은 타이핑 <🎜 🎜>에 대한 단계를 조정하십시오 더 짧은 텍스트를 조정하려면 애니메이션 입력 단계와 지속 시간을 줄여야합니다.

깜박이는 커서 애니메이션을 만들고 설정합니다 분명히, 원래 기계식 타자기에는 번쩍이는 커서가 없었지만 더 현대적인 컴퓨터/워드 프로세서의 번쩍이는 커서 효과를 모방하기 위해 추가하여 전통이되었습니다. 번쩍이는 커서 애니메이션은 정적 텍스트 요소에서 각인 된 텍스트를 돋보이게하는 데 도움이됩니다.

타자기 애니메이션에 깜박이는 커서 애니메이션을 추가하려면 먼저 플래시하는 애니메이션을 만듭니다.

우리 웹 페이지 에서이 애니메이션은

요소 테두리의 경계 색상 (타자기 효과의 커서로 사용)을 투명에서 주황색으로 변경합니다.

우리는 typed-out 클래스 규칙 에이 애니메이션을 포함시키고 애니메이션 방향 속성을 steps()로 설정하여 커서를 사라지고 0.8 초마다 무기한으로 다시 나타납니다.

코드 플래싱 타이핑 효과를 조정하려면

.container {
  display: inline-block;
}

로그인 후 복사

우리는 <🎜 🎜> 속성을 조정하여 커서를 더 얇거나 두껍게 만들 수 있습니다. 그렇지 않으면 커서 색상을 다르게 만들거나

, 깜박임 주파수를 조정하는 등을 조정할 수 있습니다. steps() 타자기 텍스트 애니메이션을 결합하는 요소 이제 CSS에서 타자기 효과를 만드는 방법을 알았으므로 이제이 타이프 워리 라이터 효과에 대한 실용적이고 관련된 사용 사례를 보여줄 차례입니다.

결론 <🎜 🎜> <,>이 기사에서는 CSS를 사용하여 애니메이션 "타자기"텍스트를 만드는 것이 얼마나 쉬운 지 이해합니다. 이 타이핑 효과는 페이지에 재미와 재미를 더할 수 있습니다.

그러나 마지막에는 부드러운 경고를받을 가치가있을 수 있습니다. 이 기술은 약간의 추가 재미를 더하기 위해 소량의 비 임계 텍스트에 가장 잘 사용됩니다. 그러나 이와 같은 CSS 애니메이션을 사용하는 데 몇 가지 제한이 있기 때문에 과도하게 의존하지 않도록주의하십시오. 결과가 플랫폼마다 다를 수 있으므로 다양한 장치 및 뷰포트 크기에서 타자기 텍스트를 테스트하십시오. 또한 보조 기술에 의존하는 최종 사용자를 고려하십시오. 이상적으로는 일부 유용성 테스트를 수행하여 사용자에게 불편을주지 않도록 할 수 있습니다. 순수한 CSS로 무언가를 할 수 있기 때문에 반드시 당신이해야한다는 의미는 아닙니다. 타자기 효과가 중요하고 더 중요한 콘텐츠에 사용하려면 적어도 JavaScript 솔루션을 고려할 수 있습니다.

어쨌든, 나는 당신 이이 게시물을 즐겼기를 바랍니다. 그것은 당신이 당신의 페이지에 재미 있고 재미를 더하기 위해 CSS 애니메이션으로 당신이 할 수있는 다른 멋진 일들에 대해 생각하게합니다.

CSS 타자기 효과 생성에 대한 자주 질문

<'s> 마지막으로, CSS에서 타자기 효과를 만드는 방법에 대한 가장 일반적인 질문에 답하겠습니다.

<<> 타자기 효과는 무엇입니까?

<<>

"타이프 리터 효과"는 타자기가 실시간으로 입력하는 것처럼 화면에서 단어별로 단어로 일련의 텍스트를 표시하는 애니메이션 기술입니다. 이 효과는 일반적으로 JavaScript로 작성되지만이 기사에서 볼 수 있듯이 CSS를 사용하여 구현할 수도 있습니다.

<<> 타자기 애니메이션이란 무엇입니까? <<>

타자기는 한 번에 한 글자 씩 문자를 인쇄합니다. 타자기 애니메이션은 타자기 타이핑을 모방하여 한 번에 한 글자로 텍스트를 제시하는 애니메이션입니다. 많은 웹 페이지에서 인기있는 애니메이션 효과입니다.

<<> CSS에서 애니메이션 텍스트를 입력하는 방법은 무엇입니까?

Modern CSS는 <🎜 , <🎜 🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 🎜>를 포함한 다양한 도구를 제공합니다. 이 도구는 속성을 통해 처음 숨겨진 텍스트를 점차적으로 표시하는 데 사용됩니다.

<<> CSS를 사용하여 사용자 정의 가능한 타자기 애니메이션을 만드는 방법은 무엇입니까?
<<>
CSS로 사용자 정의 가능한 타자기 애니메이션을 만들려면 키 프레임 및 CSS 속성을 사용하여 화면에 입력 할 때 텍스트 모양과 동작 방식을 제어해야합니다. 일부 애니메이션 매개 변수를 CSS 변수 (사용자 정의 속성)로 노출시켜 스타일 시트에서 쉽게 변경할 수 있도록 사용자 정의 할 수 있습니다. 예를 들면 :
이 CSS 코드에서는 애니메이션을 사용자 정의 할 수 있도록 사용자 정의 속성 (<🎜 🎜> 및 <🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜>)을 정의합니다. 이러한 속성을 수정하여 기본값을 변경할 수 있습니다.

<<> <🎜 🎜> 요소의 마지막 문자가 완전히 인쇄 된 후 커서를 정지시키는 방법은 무엇입니까?
<<> animation CSS 타자기 애니메이션에서 @keyframes 요소의 마지막 문자의 커서를 중지하려면 CSS 애니메이션과 steps() 속성을 사용할 수 있습니다.
<!doctype html> <html> <head> <title>Typewriter effect</title> <style> body{ background: navajowhite; background-size: cover; font-family: 'Trebuchet MS', sans-serif; } </style> </head> <body> <div class="container"> <div class="typed-out">Web Developer</div> </div> </body> </html>
로그인 후 복사
로그인 후 복사
위의 CSS에서 타자기 애니메이션은 컨테이너의 요소 너비를 점차 증가시켜 텍스트를 효과적으로 입력합니다. 완료 후 애니메이션이 최종적으로 유지되도록하기 위해
속성이 .typewriter로 설정됩니다. 이 설정을 사용하면 커서가 완전히 인쇄 된 후 animation-fill-mode 요소에서 플래시됩니다. forwards typed-out
타자기 효과를 효과적으로 사용하는 웹 사이트 예는 무엇입니까?

타자기 애니메이션은 종종 포트폴리오 사이트, 특히 디자이너 및 개발자 웹 사이트와 같은 사이트에서 사용되며, 이는 핵심 기술을 강조하고 페이지에 창의적인 감각을 추가하는 데 사용되므로 독자의 관심을 끌 수 있습니다. 타자기 효과는 때때로 블로그 웹 사이트 및 로그인 페이지 및 제품 데모에 사용됩니다.

~~위 내용은 웹 사이트에 CSS 타자기 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!~~