Tạo hiệu ứng văn bản Steam hoạt hình

Sep 12, 2025
Cách
[số 8]

Thêm hiệu ứng vào văn bản có thể thêm một cấp độ hoàn toàn mới và lãi mới. Hiệu ứng như typography động học. sẽ thu hút sự chú ý của người xem, viện trợ Kinh nghiệm người dùng và giúp kể câu chuyện đang được nói. Text HIỆU QUẢ TRÊN Làm tự hỏi trang web mang lại Phông chữ Web vào dòng tập trung theo dòng. Đọc tiếp để tìm hiểu cách tạo lại một cái gì đó tương tự.

Nhận được Tệp dự án để giúp làm theo hướng dẫn này.

01. Bắt đầu tài liệu HTML

Bước đầu tiên là xác định cấu trúc tài liệu sẽ lưu trữ nội dung HTML. Điều này bao gồm các container tài liệu, lưu trữ các phần đầu và cơ thể. Trong khi phần đầu lưu mực vào các tài nguyên CSS và JavaScript bên ngoài, cơ thể sẽ lưu trữ nội dung hiển thị được tạo ở bước 02. 

 ​​& lt;! DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& lt; tiêu đề & gt; làm mờ văn bản & lt; / tiêu đề & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
  *** BƯỚC 2 TẠI ĐÂY
& lt; / body & gt;
& lt; / html & gt;

02. Nội dung HTML

Bước này xác định nội dung HTML có thể nhìn thấy. Hãy lưu ý cách các văn bản được chỉ định để có hiệu ứng mờ đều chứa trong một thùng chứa có lớp 'mờ'. Lớp này được sử dụng bởi JavaScript để tham chiếu các mục văn bản ở bước 03 và bởi CSS trong các bước sau. 

 ​​& lt; H2 & GT;
  Kỷ luật đến từ
  & lt; ul class = "Blur" & gt;
  & lt; li & gt; cam kết & lt; / li & gt;
  & lt; li & gt; kiên trì & lt; / li & gt;
  & lt; li & gt; cống hiến & lt; / li & gt;
  & lt; li & gt; đào tạo & lt; / li & gt;
  & lt; li & gt; khát vọng & lt; / li & gt;
  & lt; li & gt; giáo dục & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Trì hoãn hoạt hình tự động

Tạo một tệp mới gọi là 'Code.js'. Mỗi mục bên trong thùng chứa Blur sẽ được trình bày ba giây sau mục trước đó. JavaScript được sử dụng để tự động hóa ứng dụng các thuộc tính CSS duy nhất. Bước đầu tiên của việc này là chọn tất cả các mục cấp độ đầu tiên bên trong thùng chứa Blur - sau khi trang đã tải. 

 window.addeventlistener ("tải", hàm () {
  var nút = document.queryselectorall (". Blur & gt; *");
  *** BƯỚC 4 TẠI ĐÂY
});

04. Số giây

Vòng lặp 'cho' được sử dụng để tham chiếu từng mục được trả về biến 'nút' trong bước trước. Bộ đếm chỉ mục của vòng lặp 'for' được sử dụng để tính số giây để gán cho thuộc tính độ trễ hoạt hình. Do đó, mỗi mục có độ trễ dài hơn ba giây so với mục trước đó. 

 cho (var i = 0; i & lt; nút.length; i ++) {
  các nút [i] .style.animationDelay = (i * 3) + "S";
}

05. CSS Blur.

Tạo một tệp mới gọi là 'Styles.css'. Bước đầu tiên để xác định các quy tắc trình bày CSS khởi xướng từng mục văn bản là vô hình. Một hình ảnh động gọi là 'AnimationBlur' cũng được áp dụng sẽ hoạt động cho mục thành chế độ xem trong thời gian năm giây. Chế độ hoạt hình phải được đặt thành 'Chuyển tiếp' để nó dừng trên khung cuối cùng của nó. 

 .Blur & GT; * {
  Opacity: 0;
  Hoạt hình: Animateblur 5S về phía trước;
}

06. Bắt đầu hoạt hình

Hoạt hình được áp dụng cho các phần tử 'mờ' ở bước 5 được xác định trong bước này. Tham chiếu đến 'AnimationBlur' được thực hiện dưới dạng hình ảnh động Keyframes. Khung đầu tiên 'từ' đặt các phần tử có thể nhìn thấy bằng bóng văn bản - nhưng với màu văn bản trong suốt. Đây là những gì tạo ra hiệu ứng văn bản mờ. 

 @KeyFrames Animateblur {
  từ {
  Opacity: 1;
  Text-Shadow: 0 0 1EM RGBA (0,0,0, 0,5);
  Màu sắc: RGBA (0,0,0,0);
  Không thể
    *** Bước 7 ở đây
}

07. Khung hoạt hình cuối cùng

Khung 'to' trong hoạt hình xác định khung cuối cùng mà văn bản sẽ hoạt hình. Khung này đặt bóng văn bản biến mất, cùng với màu văn bản có thể nhìn thấy hoàn toàn. Kết hợp với bước 06, các khung hình động giữa 'từ' và 'để' sẽ được trình duyệt tự động tính toán. 

 đến {
  Opacity: 1;
  Text-Shadow: 0 0 0px RGBA (0,0,0,0);
  Màu sắc: # 000;
}

Bài viết này ban đầu xuất hiện trong tạp chí thiết kế web. Đăng ký tại đây .

Nhớ - luôn luôn nghĩ về người dùng

Generate - the conference for web designers

Khi giới thiệu các hiệu ứng ưa thích cho một trang nó cần có một mục đích, bạn cần phải nghĩ về trải nghiệm người dùng.Và đây là những gì nhà phát triển UI Freelance Freelance Sara Soueidan sẽ tiết lộ trong 'Sử dụng CSS (và SVG) của mình vì lợi ích của UX' tại Tạo Luân Đôn 2018. .

Trong cuộc nói chuyện, cô sẽ chỉ ra một loạt các khả năng mà CSS cung cấp để cải thiện trải nghiệm người dùng tổng thể về giao diện người dùng của bạn, sử dụng CSS (có rắc SVG và JS tại đây và ở đó).

Hãy chắc chắn rằng bạn không bỏ lỡ. Nhận vé của bạn bây giờ.

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

  • Tạo hiệu ứng văn bản chao đảo với JavaScript
  • Tạo hiệu ứng văn bản neon phát sáng
  • Làm thế nào để làm cho văn bản hiển thị hoàn hảo

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

8 tính năng CSS tiên tiến (và cách sử dụng chúng)

Cách Sep 12, 2025

[số 8] (Tín dụng hình ảnh: Getty Images) CSS không ngừng phát triển và một loạt các tính năng m�..

Tạo nghệ thuật CSS hoạt hình

Cách Sep 12, 2025

[số 8] (Tín dụng hình ảnh: Tiffany Choong) Tạo hình ảnh CSS là một cách thú vị để thực hành ..

Cách xây dựng giao diện chatbot

Cách Sep 12, 2025

[số 8] Vào giữa những năm 2000, các đại lý ảo và chatbots dịch vụ khách hàng đã nhận được rất nhi�..

Anatomy MasterClass: Hoàn thiện số liệu của bạn

Cách Sep 12, 2025

[số 8] Trong lớp Master này, tôi sẽ tiết lộ các bước cơ bản bạn cần để theo dõi để học Cá..

Vẽ một cảnh biển tràn đầy năng lượng trong dầu

Cách Sep 12, 2025

[số 8] Nguyên vật liệu ..

Cách làm tan chảy một đối tượng 3D với ba.js

Cách Sep 12, 2025

[số 8] Web như chúng ta biết, không ngừng thay đổi và phát triển. Những gì chúng ta vẫn có thể nhớ là ..

Tạo bảng điều khiển đáp ứng với Figma

Cách Sep 12, 2025

Figma là một công cụ đồ họa cho các nhà thiết kế UI. Nó có một giao diện đơn giản và cho phép bạn hợp tác làm việc với đồng đội của mình. Nếu..

Kết hợp các kỹ năng truyền thống và kỹ thuật số để tạo bìa truyện tranh

Cách Sep 12, 2025

[số 8] Trong nhiều năm, tôi đã bị đe dọa bằng cách làm việc kỹ thuật số. Một cái gì đó về ngòi n..

Thể loại