Cách tạo hiệu ứng gõ hoạt hình

Sep 11, 2025

Cách

Khi được sử dụng tốt, [số 8] Hoạt hình CSS.

có thể thêm sự quan tâm và nhân cách vào trang web của bạn. Trong bài viết này, chúng ta sẽ đi qua cách tạo hiệu ứng hoạt hình sẽ làm cho kiểu chữ của bạn xuất hiện dần dần, như thể nó đang được gõ vào một máy đánh chữ. Bạn có thể thấy một ví dụ về hoạt hình trong hành động trên trang web cho Crypton. , Bot giao dịch tiền điện tử. Hiệu ứng rất ấn tượng và cũng dễ thực hiện.

Đối với những cách dễ dàng khác để tạo ra thiết kế web tốt, hãy thử một sự tuyệt vời người tạo ra trang web công cụ, hoặc một đỉnh web hosting dịch vụ. Hoặc, hãy đọc tiếp để tìm hiểu làm thế nào để đạt được hoạt hình này trên trang web của riêng bạn.

Khám phá biên giới mới của hoạt hình CSS

01. TỔNG HỢP TÀI LIỆU

Bước đầu tiên là bắt đầu cấu trúc của trang web. Điều này bao gồm container HTML chịu trách nhiệm lưu trữ các phần đầu và cơ thể. Trong khi trách nhiệm chính của phần đầu là tải CSS bên ngoài, phần cơ thể sẽ lưu trữ nội dung HTML được tạo ở bước 2.

 & lt;! DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& lt; tiêu đề & gt; đánh máy hiệu ứng & lt; / tiêu đề & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; body & gt;
*** BƯỚC 2 TẠI ĐÂY
& lt; / body & gt;
& lt; / html & gt;

02. Nội dung HTML

Nội dung HTML bao gồm một thùng chứa sử dụng lớp 'gõ'. Điều này sẽ được sử dụng bởi CSS để áp dụng hiệu ứng gõ cho bất kỳ yếu tố con nào. Yếu tố nội dung con được tạo từ thẻ H1, nhưng bạn có thể sử dụng một yếu tố khác như 'P' để tạo phần tử dưới dạng một đoạn văn.

 & lt; div class = "gõ" & gt;
  & lt; h1 & gt; đặt tiêu đề của bạn ở đây ... & lt; / h1 & gt;
& lt; / div & gt;

03. Bắt đầu CSS.

Tạo một tệp có tên 'Styles.css'. Bước đầu tiên của CSS xác định tài liệu và các thùng chứa thân để bao phủ cửa sổ trình duyệt đầy đủ mà không có bất kỳ khoảng cách viền có thể nhìn thấy nào. Màu mặc định cho nền trang màu đen và màu trắng văn bản cũng được đặt trong bước này. Các yếu tố nội dung trong trang sẽ kế thừa màu được đặt trong bước này dưới dạng màu mặc định của chúng.

 Cơ thể, HTML {
  Hiển thị: Khối;
  Chiều rộng: 100%;
  Chiều cao: 100%;
  Bối cảnh: # 000;
  Màu sắc: #fff;
  Đệm: 0;
  Biên độ: 0;
}

04. Gõ trẻ em

Tất cả trẻ em trong hộp gõ được đặt để hiển thị trên một dòng mà không cần sử dụng gói văn bản. Quan trọng nhất, các yếu tố con này có hoạt hình 'gõ' được áp dụng cho chúng. Hoạt hình này được đặt để phát trên năm giây với 50 ảnh chụp nhanh khung hình - cho phép hiệu ứng gõ so le.

 .Typing & GT; * {
  tràn: ẩn;
  Không gian trắng: Nowrap;
  Hoạt hình: Typinganim 5s các bước (50);
}

05. Mắt mặt

Hiệu ứng cũng được kèm theo một khuôn mặt hoạt hình xuất hiện để thuật lại văn bản đã gõ. Bước này tạo ra con mắt của khuôn mặt này dưới dạng phần tử ảo 'của CSS sử dụng sau bộ chọn. Mắt được đặt so với văn bản cha mẹ, với nội dung của nó được đặt dưới dạng hai ký tự văn bản chấm.

 .Typing & GT; *::sau{
  Nội dung: ". .";
  Hiển thị: Khối;
  Vị trí: Tuyệt đối;
  Top: 1EM;
  còn lại: .35EM;
}

06. Mặt phải đối mặt

Giống như với đôi mắt, miệng của khuôn mặt được tạo ra từ một yếu tố ảo CSS - lần này sử dụng trước bộ chọn. Miệng được định vị liên quan đến phần tử văn bản cha mẹ, cũng như có bán kính viền để xuất hiện với hình dạng tròn.

Các typingspeak. Hoạt hình được áp dụng; Nó sẽ kéo dài trong 0,5 giây bằng cách sử dụng hai khung hình hoạt hình. Với hoạt hình được lặp lại năm lần, tổng thời gian hoạt hình sẽ là 2,5 giây.

 .Typing & GT; *::trước{
  Nội dung: "";
  Vị trí: Tuyệt đối;
  Hiển thị: Khối;
  TOP: 2.1EM;
  còn lại: .25em;
  Chiều rộng: 1EM;
  Chiều cao: .1EM;
  bán kính biên giới: 100%;
  Bối cảnh: #fff;
  Hoạt hình: typingspeak .5s các bước (2);
  Hoạt hình-lặp lại-đếm: 5;
}

07. Định nghĩa hoạt hình

Bước này xác định các hình ảnh động được tham chiếu bởi các phần tử được tạo trong các bước trước. Các typinganim. Hoạt hình đã được sử dụng để hiệu ứng gõ thay đổi phần tử của nó khỏi không có chiều rộng đến độ rộng đầy đủ. Các typingspeak. Hoạt hình được sử dụng cho miệng của khuôn mặt thay đổi phần tử của nó xuất hiện phẳng để mở hơn.

 @keyframes typinganim {
  từ {chiều rộng: 0}
  đến {chiều rộng: 100%}
Không thể
@keyframes typingspeak {
  0% {WIDTH: 1EM; Chiều cao: .1EM}
  100% {WIDTH: 1EM; Chiều cao: 0,5EM; Không thể
Không thể
***

Có tập tin thiết kế để tiết kiệm?Nâng cấp của bạn lưu trữ đám mây Vì vậy, nó tùy thuộc vào công việc.

Bài viết này ban đầu được xuất bản trong số 275 của Trình thiết kế web thiết kế web sáng tạo. MUA VẤN ĐỀ 275 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

Tạo hình ảnh động UI Slick
Hiểu thuộc tính Hiển thị CSS
Tạo hiệu ứng văn bản Steam hoạt hình

Cách tạo hiệu ứng gõ hoạt hình

01. TỔNG HỢP TÀI LIỆU

02. Nội dung HTML

03. Bắt đầu CSS.

04. Gõ trẻ em

05. Mắt mặt

06. Mặt phải đối mặt

07. Định nghĩa hoạt hình

Cách - Các bài báo phổ biến nhất

Cách vẽ động vật: 15 mẹo hàng đầu

Cách Photoshop ai đó thành một hình ảnh

Cách tạo một sinh vật tưởng tượng siêu thực

Tạo hiệu ứng họa sĩ trong Photoshop CC

Xây dựng các thành phần đáp ứng có thể mở rộng

Làm sắc nét kỹ năng vẽ tranh tĩnh lặng của bạn

Cách nhận thêm từ GIF

Phát triển các kỹ năng biếm họa của bạn

Thể loại