애니메이션 타이핑 효과를 만드는 방법

Sep 11, 2025

어떻게

[삼]

잘 사용했을 때, CSS 애니메이션 귀하의 사이트에 관심과 개성을 추가 할 수 있습니다. 이 기사에서는 타이프라이터에서 입력되는 것처럼 타이포그래피가 점차적으로 입력되는 애니메이션 효과를 만드는 방법을 살펴 보겠습니다. 사이트에서 액션에서 애니메이션의 예를 볼 수 있습니다. 크립톤 , Cryptocurrency Trading Bot. 효과는 인상적이며 구현하기 쉽습니다.

괜찮은 웹 디자인을 만드는 다른 쉬운 방법은 훌륭한 시도를 시도하십시오. 웹 사이트 빌더 도구 또는 상단 웹 호스팅 서비스. 또는 자신의 사이트 에서이 애니메이션을 달성하는 방법을 찾으려면 계속 읽으십시오.

CSS 애니메이션의 새로운 국경을 탐험하십시오

01. 문서 시작

첫 번째 단계는 웹 페이지의 구조를 시작하는 것입니다. 이것은 헤드 및 본문 섹션을 저장하는 HTML 컨테이너로 구성됩니다. 헤드 섹션의 주요 책임은 외부 CSS를로드하는 것과 본문 섹션은 2 단계에서 생성 된 HTML 컨텐츠를 저장합니다.

 & lt; Doctype HTML & gt;
& lt; html & gt;
& lt; head & gt;
& lt; 타이칭 효과 & lt; / title & gt;
& lt; 링크 rel = "스타일 시트"유형 = "text / css"href = "styles.css"/ & gt;
& lt; / head & gt;
& lt; body & gt;
*** 2 단계
& lt; / body & gt;
& lt; / html & gt;

02. HTML 컨텐츠

HTML 컨텐츠는 '입력'클래스를 사용하는 컨테이너로 구성됩니다. 이것은 CSS에서 타이핑 효과를 하위 요소에 적용하는 데 사용됩니다. 하위 Content 요소는 H1 태그로 만들어졌지만 'P'와 같은 다른 요소를 사용하여 요소를 단락으로 만듭니다.

 & lt; div class = "타이핑"& gt;
  & lt; h1 & gt; 여기에 제목을 넣으십시오 ... & lt; / h1 & gt;
& lt; / div & gt;

03. CSS 개시

'Styles.css'라는 파일을 만듭니다. CSS의 첫 번째 단계는 문서 및 본문 컨테이너가 보이는 테두리 간격없이 전체 브라우저 창을 덮도록 정의합니다. 검은 페이지 배경 및 흰색 텍스트 색상의 기본 색상 도이 단계에서도 설정됩니다. 페이지 내의 콘텐츠 요소는이 단계에서 설정된 색상을 기본 색상으로 상속합니다.

 본문, HTML {
  디스플레이 : 블록;
  너비 : 100 %;
  높이 : 100 %;
  배경 : # 000;
  색상 : #fff;
  패딩 : 0;
  마진 : 0;
}

04. 아이들 타이핑

타이핑 컨테이너 내의 모든 어린이는 텍스트 포장을 사용하지 않고 한 줄 위에 표시되도록 설정됩니다. 가장 중요한 것은 이러한 하위 요소에 '타이핑'애니메이션이 '타이핑'애니메이션이 적용됩니다. 이 애니메이션은 50 프레임 스냅 샷으로 5 초 이상 재생되도록 설정되어 있도록 설정되어 있지 않습니다. 비틀 거리는 타이핑 효과가 가능합니다.

. 타이핑 & gt; * {
  오버플로 : 숨김;
  화이트 공간 : NowRap;
  애니메이션 : 타이핑 니 림 5S 단계 (50);
}

05. 얼굴 눈

이 효과에는 입력 된 텍스트를 나레이션하는 것처럼 보이는 애니메이션 얼굴이 수반됩니다. 이 단계는이 얼굴의 눈을 CSS의 가상 '요소로 만듭니다. 후 선택자. 눈은 부모 텍스트와 상대적으로 두 개의 도트 텍스트 문자로 설정되어 있습니다.

. 타이핑 & gt; *::후{
  내용 : ".";
  디스플레이 : 블록;
  위치 : 절대;
  상단 : 1em;
  왼쪽 : .35em;
}

06. 얼굴 입

눈과 마찬가지로, 얼굴의 입은 CSS 가상 요소로 만들어집니다 - 이번에는 전에 선택자. 입안은 부모 텍스트 요소와 관련하여 위치가 있으며 둥근 모양으로 나타나는 경계 반경을 갖는 것입니다.

그만큼 타이핑 스페이크 애니메이션이 적용됩니다. 두 프레임 애니메이션을 사용하여 0.5 초 동안 지속됩니다. 애니메이션이 다섯 번 반복되면 전체 애니메이션 시간은 2.5 초입니다.

. 타이핑 & gt; *::전에{
  내용 : "";
  위치 : 절대;
  디스플레이 : 블록;
  상단 : 2.1em;
  왼쪽 : .25em;
  너비 : 1em;
  높이 : .1em;
  경계 반경 : 100 %;
  배경 : #fff;
  애니메이션 : TypingSpeak .5S 단계 (2);
  애니메이션 반복 - 카운트 : 5;
}

07. 애니메이션 정의

이 단계에서는 이전 단계에서 생성 된 요소가 참조하는 애니메이션을 정의합니다. 그만큼 타이핑 팀 타이핑 효과에 사용 된 애니메이션은 그 요소가 너비에서 전체 너비로 변경되지 않습니다. 그만큼 타이핑 스페이크 얼굴의 입에 사용되는 애니메이션은 요소가 더 열려있는 것으로 나타나는 요소를 변경합니다.

 @KeyFrames TypingAnim {
  {너비 : 0}
  {너비 : 100 %}
}
@KeyFrames TypingPeak {
  0 % {폭 : 1em; 높이 : .1em}
  100 % {폭 : 1em; 높이 : .5em; }
}
***

저장할 디자인 파일이 있습니까?업그레이드하십시오 클라우드 스토리지 그래서 그것은 일자리에 달려 있습니다.

이 기사는 원래 Creative Web Design Magazine Web Designer의 Issage 275에서 출판되었습니다. 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

매끄러운 UI 애니메이션을 만듭니다
CSS 디스플레이 속성 이해
애니메이션 스팀 텍스트 효과를 만듭니다

애니메이션 타이핑 효과를 만드는 방법

01. 문서 시작

02. HTML 컨텐츠

03. CSS 개시

04. 아이들 타이핑

05. 얼굴 눈

06. 얼굴 입

07. 애니메이션 정의

어떻게 - 가장 인기있는 기사

Photoshop의 믹서 브러시 마스터

친 화성 디자이너의 자산을 시작하십시오

아트웍을 장착하는 방법

친 화성 디자이너가있는 레트로 로고를 만드는 방법

페인트에 그림자 색을 섞는 방법

신화 생물 개발 방법

프랙탈로 디자인 시스템을 문서화하십시오

Zbrush에서 만화 머리를 조각하고 포즈하는 방법

카테고리