Cách mã hiệu ứng văn bản thông minh với CSS

Feb 2, 2026

Cách

[Hình ảnh: Trung cấp]

Liên kết Rollover là một cách tuyệt vời để thu hút sự chú ý của người dùng, đặc biệt nếu họ làm điều gì đó bất thường hoặc nguyên bản. Giữa trẻ có một hiệu ứng tuyệt vời, hiếm khi được nhìn thấy ở nơi khác, chụp mỗi chữ cái và tách chúng ra khỏi hoạt hình, mà đá vào khi khách truy cập bay qua từ này. Hoạt hình giúp truyền đạt nhân vật vui tươi của thương hiệu Sandwich.

Trong bài viết này, chúng tôi chỉ cho bạn cách tạo lại hiệu ứng trên trang web của bạn. Để có nhiều cảm hứng hơn, hãy xem hướng dẫn của chúng tôi về Ví dụ hoạt hình CSS tốt nhất (với hướng dẫn về cách mã hóa chúng). Cho một cái gì đó hơi khác, hãy thử một đỉnh người tạo ra trang web hoặc lựa chọn tốt nhất của chúng tôi lưu trữ đám mây . Và nếu bạn đang làm cho trang web của bạn phức tạp hơn, hãy chắc chắn rằng của bạn web hosting là trên điểm.

01. Hiệu ứng văn bản Rollover

Một trong những hiệu ứng văn bản tuyệt vời đối với trang web giữa trẻ em dành cho các hiệu ứng rollover trên menu, trong đó các chữ cái tách ra trên văn bản và xoay một chút. Bắt đầu điều này với một số thẻ HTML đơn giản.

 & lt; div class = "wrapper" & gt;
& lt; div class = "từ" & gt; Ăn sáng & lt; / div & gt;
& lt; / div & gt;

02. Tạo CSS.

Sử dụng tệp CSS hoặc thẻ kiểu riêng biệt để thêm các quy tắc CSS sau và làm cho trang điền vào kích thước đầy đủ của trình duyệt bằng cách đảm bảo thân và trình bao bọc có độ cao đầy đủ khả dụng.

 cơ thể {
Chiều rộng: 100%;
Chiều cao: 100%;
Biên độ: 0;
Đệm: 0;
Không thể
.vỏ bánh {
Hiển thị: lưới;
Chiều cao: 100%;
}

03. Định vị từ

Các từ ngữ lớp trung tâm từ trong lưới. Bất kỳ văn bản nào được cung cấp từ ngữ lớp có thể áp dụng này. Các lên Lớp học sẽ được áp dụng cho mọi bức thư khác và những thứ này sẽ di chuyển lên trên.

 .word {
Kích thước phông chữ: 3EM;
Biên độ: Tự động tự động;
Không thể

.chuẩn rồi
Đồn là
Hiển thị: Khối nội tuyến;
Chuyển đổi: Translate3D (0px, 0px, 0px)
Xoay (0DEG);
Chuyển đổi: Tất cả 0,5S dễ dàng vào;
}

04. Lên và hơn

Bây giờ xuống Lớp chia sẻ các cài đặt rất giống với lên Nhưng di chuột cho thấy sự chuyển động lên trên cho lên Rollover. Nhìn lên cũng xoay một chút để tăng cường vẻ ngoài.

 .word .down
Đồn là
Hiển thị: Khối nội tuyến;
Chuyển đổi: Translate3D (0px, 0px, 0px)
Xoay (0DEG);
Chuyển đổi: Tất cả 0,5S dễ dàng vào;
Không thể

.word: Hover .up
Đồn là
Chuyển đổi: Translate3D (0px, -8px, 0px)
Xoay (12DEG);
Màu sắc: # 058B05
}

05. lơ lửng

Khi người dùng dao động qua văn bản, lớp xuống sẽ di chuyển văn bản xuống dưới. Sau đó trong JavaScript, văn bản sẽ được chia thành các nhịp riêng biệt với các lớp được thêm tự động để thay thế các nhịp.

 .word: di chuột .Down {
Chuyển đổi: Translate3D (0px, 8px, 0px)
Xoay (-12DEG);
Màu sắc: # 058B05;
}

06. Tự động cho người dân

Đó là một chút rắc rối để phải đặt mọi bức thư trong các nhịp xen kẽ với các lớp khác nhau, vì vậy chúng tôi sẽ tự động hóa quy trình bằng cách truy vấn JavaScript để truy vấn bộ chọn và lấy mỗi chữ cái. Ở đây giống như đàn bà Biến lấy chữ cái hiện tại khi nó lặp qua văn bản.

 & lt; script & gt;
Var Elements = document.QuerySelectorall
('word ');
cho (var i = 0, l = allement.length; i
& lt; l; i ++) {
var str = phần tử [i] .TextContent;
các phần tử [i] .innerhtml = '';

07. Thêm lớp học xen kẽ

Bây giờ một vòng lặp khác đặt từng chữ cái trong phần tử SPAN của riêng nó và thêm một trong lên hoặc là xuống lớp đến các nhịp. Nếu bạn nhìn vào điều này trong trình duyệt, bạn sẽ thấy văn bản phân chia bằng mỗi chữ cái lên và xuống, trong khi quay một chút.

Bạn có thể thấy hiệu ứng trong hành động trên Trang web giữa trẻ em .

 cho (var j = 0, ll = str.length; j
& lt; ll; J ++) {
var spn = document.createase ('span');
các yếu tố [i] .appendchild (SPN);
spn.textcontent = str [j];
Đặt pos = (j% 2)? 'lên xuống';
spn. classlist.add (pos);
Không thể
 Không thể
& lt; / script & gt;

Bài viết này ban đầu được xuất bản trong Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . Mua số 286. hoặc là đăng ký. .

Đọc thêm:

Thêm bộ lọc SVG bằng CSS
Cách thiết kế với hình dạng CSS: Giới thiệu
5 Máy phát điện lưới CSS mát mẻ

Cách mã hiệu ứng văn bản thông minh với CSS

01. Hiệu ứng văn bản Rollover

02. Tạo CSS.

03. Định vị từ

04. Lên và hơn

05. lơ lửng

06. Tự động cho người dân

07. Thêm lớp học xen kẽ

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

8 Hướng dẫn thiết kế đồ họa mới tuyệt vời

Cách tạo đôi mắt lấp lánh trong sơn dầu

Tạo bảng màu vô tận với Khoma

Làm sắc nét mô hình hóa bề mặt cứng của bạn trong 3ds Max

Cách thiết kế trải nghiệm Chatbot

Cách vẽ cảnh rừng tưởng tượng mơ mộng

Tạo một rạp chiếu phim với Photoshop trong 60 giây

Tạo một nguyên mẫu có độ trung thực cao trong nguyên tử

Thể loại