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

Jan 27, 2026
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 - Các bài báo phổ biến nhất

Tạo hiệu ứng nền thị sai được điều khiển bằng chuột

Cách Jan 27, 2026

[số 8] (Tín dụng hình ảnh: Renaud Rohlinger) Các trang web với Scallax Scrolling tiếp tục được ph�..

Cách quét một người trong vòng chưa đầy năm phút

Cách Jan 27, 2026

[số 8] Không có quyền truy cập vào một mảng máy ảnh chụp ảnh để thực hiện một Quét 3D ..

Cải thiện kỹ năng nghệ thuật của bạn trong Photoshop

Cách Jan 27, 2026

[số 8] Đối với hội thảo này, tôi muốn chỉ cho bạn một cách thực sự thú vị để phác họa các nhâ..

Cách thiết kế các hình thức đáp ứng và thông thường thiết bị

Cách Jan 27, 2026

[số 8] Cho dù đó là một luồng đăng ký hoặc bước bước nhiều góc nhìn, các hình thức là một trong nh..

Vẽ một bức chân dung như Van Gogh

Cách Jan 27, 2026

[số 8] Họa sĩ hậu ấn tượng của Hà Lan Vincent van Gogh (1853-1890) đã tạo ra nhiều bức chân dung tự tron..

Tạo mực trộn với InDesign

Cách Jan 27, 2026

[số 8] Trang 1/2: Tạo một mẫu mực hỗn hợp Tạo một mẫu ..

Tạo hình minh họa đơn giản cho Web

Cách Jan 27, 2026

[số 8] Tôi ngồi xuống, chơi một số âm nhạc, làm mờ ánh sáng và mở laptop của tôi. Tôi đã có rất nh..

Tạo môi trường trò chơi trong Unreal Engine 4

Cách Jan 27, 2026

[số 8] Sử dụng Project 4 Project của tôi, điểm dừng cuối cùng như một ví dụ, tôi muốn hiển thị cho b..

Thể loại