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

집

웹 프론트엔드

CSS 튜토리얼

웹 사이트에 CSS 타자기 효과를 만드는 방법

尊渡假赌尊渡假赌尊渡假赌

Feb 08, 2025 am 10:20 AM

~~순수한 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 타자기 효과 생성에 대한 자주 질문

마지막으로, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

WebStorm Mac 버전

유용한 JavaScript 개발 도구

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.