Bài Viết, Tất cả bài viết, Thủ thuật Css

Thủ thuật Css Tạo Hiệu Ứng Line Effect Khi Rê Chuột Vào Bài Viết WordPress

Đăng vào Tháng 4 4, 2025 bởi admin

admin

04/04/2025

5 Phút đọc

31 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một hiệu ứng line effect độc đáo và bắt mắt khi rê chuột vào các bài viết trên trang chủ, trang lưu trữ theo tags, hay category của website. Bạn có thể áp dụng kỹ thuật này cho các website sử dụng nền tảng như WordPress hoặc các hệ thống tương tự.

Thủ thuật Css Tạo Hiệu Ứng Line Effect Khi Rê Chuột Vào Bài Viết WordPress

Lý Do Nên Tạo Hiệu Ứng Line Effect Khi Hover?

Hiệu ứng line effect khi hover không chỉ làm cho giao diện website của bạn trở nên sinh động hơn mà còn giúp người dùng dễ dàng tương tác với các bài viết. Khi người dùng rê chuột qua danh sách bài viết, hiệu ứng này sẽ tạo ra một đường viền hoặc một đường kẻ kéo dài, thu hút sự chú ý mà không gây mất cân đối cho thiết kế trang.

Demo Line Effect Khi Rê Chuột Vào Bài Viết

Dưới đây là ví dụ về hiệu ứng line effect khi người dùng rê chuột vào bài viết:

Khi rê chuột vào bài viết, một đường kẻ sẽ xuất hiện từ các góc của bài viết, tạo nên một hiệu ứng độc đáo.
Các đường kẻ này có thể thay đổi chiều dài, màu sắc và tốc độ tùy thuộc vào nhu cầu và phong cách thiết kế của bạn.

Hướng Dẫn Tạo Line Effect Với CSS

Để tạo hiệu ứng line effect này, bạn chỉ cần sử dụng một đoạn mã CSS đơn giản. Dưới đây là mã CSS mà bạn cần thêm vào phần Tùy Chỉnh CSS trong giao diện theme của bạn.

/* Line Effect Animation */
.post-item .col-inner::before,
.post-item .col-inner::after {
  content: "";
  width: 0;
  height: 2px;
  z-index: 1;
  position: absolute;
  transition: all 0.4s ease-in-out;
  background: linear-gradient(45deg, #f8be00, #ff6a00); /* Gradient màu sắc của line */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transition-delay: 0.3s;
}

.post-item .col-inner::after {
  left: 0;
  bottom: 0;
}

.post-item .col-inner .box::before {
  left: 0;
  top: 0;
}

.post-item .col-inner .box::after {
  right: 0;
  bottom: 0;
}

.post-item .col-inner:hover::before,
.post-item .col-inner:hover::after {
  transition-delay: 0s;
}

.post-item .col-inner:hover .box::before,
.post-item .col-inner:hover .box::after {
  transition-delay: 0.55s;
}

.post-item .col-inner .box::before,
.post-item .col-inner .box::after {
  content: "";
  width: 2px;
  height: 0;
  z-index: 1;
  position: absolute;
  transition: all 0.4s ease-in-out;
  background: linear-gradient(45deg, #f8be00, #ff6a00); /* Gradient màu sắc của line */
  transition-delay: 0s;
}

.post-item .col-inner:hover::before,
.post-item .col-inner:hover::after {
  width: 100%;
}

.post-item .col-inner:hover .box::before,
.post-item .col-inner:hover .box::after {
  height: 100%;
}

.post-item .col-inner::before {
  right: 0;
  top: 0;
}

/* Line Effect Animation */

.post-item .col-inner::before,

.post-item .col-inner::after {

content: "";

width: 0;

height: 2px;

z-index: 1;

position: absolute;

transition: all 0.4s ease-in-out;

background: linear-gradient(45deg, #f8be00, #ff6a00); /* Gradient màu sắc của line */

box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

transition-delay: 0.3s;

}

.post-item .col-inner::after {

left: 0;

bottom: 0;

}

.post-item .col-inner .box::before {

left: 0;

top: 0;

}

.post-item .col-inner .box::after {

right: 0;

bottom: 0;

}

.post-item .col-inner:hover::before,

.post-item .col-inner:hover::after {

transition-delay: 0s;

}

.post-item .col-inner:hover .box::before,

.post-item .col-inner:hover .box::after {

transition-delay: 0.55s;

}

.post-item .col-inner .box::before,

.post-item .col-inner .box::after {

content: "";

width: 2px;

height: 0;

z-index: 1;

position: absolute;

transition: all 0.4s ease-in-out;

background: linear-gradient(45deg, #f8be00, #ff6a00); /* Gradient màu sắc của line */

transition-delay: 0s;

}

.post-item .col-inner:hover::before,

.post-item .col-inner:hover::after {

width: 100%;

}

.post-item .col-inner:hover .box::before,

.post-item .col-inner:hover .box::after {

height: 100%;

}

.post-item .col-inner::before {

right: 0;

top: 0;

}

Hướng Dẫn Tùy Chỉnh Màu Sắc Hiệu Ứng

Nếu bạn muốn thay đổi màu sắc của đường line trong hiệu ứng, bạn chỉ cần điều chỉnh mã màu tại hai dòng sau trong CSS:

Dòng 9: background: #f8be00;
Dòng 21: background: #f8be00;

Thay đổi mã màu #f8be00 thành màu sắc phù hợp với tông màu chủ đạo của website bạn.

Lưu Ý Khi Sử Dụng Line Effect

Tốc độ chuyển động: Bạn có thể thay đổi tốc độ của hiệu ứng bằng cách điều chỉnh giá trị trong transition: all 0.2s linear; để nhanh hoặc chậm hơn tùy thích.
Độ dày của line: Bạn có thể điều chỉnh độ dày của line bằng cách thay đổi giá trị height: 2px; thành một giá trị khác nếu muốn đường line to hoặc mảnh hơn.

Kết Luận

Với chỉ vài dòng CSS đơn giản, bạn đã có thể tạo ra một hiệu ứng line effect đẹp mắt và dễ dàng tùy chỉnh theo nhu cầu của mình. Hy vọng hướng dẫn này sẽ giúp bạn làm mới giao diện website và tạo sự chú ý cho người dùng khi họ duyệt các bài viết. Nếu có bất kỳ câu hỏi nào, đừng ngần ngại để lại bình luận dưới bài viết này.

Chúc các bạn thành công!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Bao Giờ Google Cập Nhật PageRank? Cập Nhật Mới Nhất Về PageRank 2025

Kể từ khi ra đời, PageRank đã trở thành một yếu tố quan trọng trong thuật toán của Google để đánh giá và xếp hạng...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Mục LụcHướng Dẫn Tạo Line Effect Với CSSHướng Dẫn Tùy Chỉnh Màu Sắc Hiệu ỨngLưu Ý Khi Sử Dụng Line EffectKết LuậnPhần 1: Hướng dẫn...
1001 Lưu Ý Cẩn Thận Trong SEO 2025 Trên Google

SEO (Search Engine Optimization) luôn là một lĩnh vực không ngừng thay đổi, và vào năm 2025, Google đã có những cập nhật quan trọng...
Tối Ưu Hóa SEO Cho Các Doanh Nghiệp Nhỏ Năm 2025 Mới Nhất

Trong kinh doanh hiện đại, sự hiện diện trực tuyến không chỉ là một lợi thế mà còn là điều cần thiết cho sự thành...
Code chức năng wordpress yêu cầu thay đổi mật khẩu định kỳ

Dưới đây là code hoàn chỉnh để yêu cầu người dùng WordPress thay đổi mật khẩu định kỳ mỗi 6 tháng. Chức năng chính của...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Hướng Dẫn Làm Sạch Header WordPress Để Tăng Tốc Độ Tải Trang Và Cải Thiện SEO

Khi sử dụng WordPress, nhiều người dùng không để ý rằng phần Header của website chứa rất nhiều mã không cần thiết. Những đoạn mã...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

Mục LụcHướng Dẫn Tạo Line Effect Với CSSHướng Dẫn Tùy Chỉnh Màu Sắc Hiệu ỨngLưu Ý Khi Sử Dụng Line EffectKết Luận1. Giới Thiệu Code...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...
Hướng Dẫn Chi Tiết Viết Bài Chuẩn SEO Từ A Đến Z Dễ Hiểu Và Hiệu Quả

SEO có thể là một thế giới rộng lớn với vô vàn thuật ngữ và chiến lược, nhưng đừng lo! Nếu bạn muốn bài viết...
Hướng Dẫn Cách Thiết Kế Giao Diện Người Dùng (UI) Hiệu Quả

Trong thời đại số hóa mạnh mẽ hiện nay, thiết kế giao diện người dùng (UI) không chỉ đơn thuần là việc trang trí một...
Tại Sao Tối Ưu Hóa Tìm Kiếm Giọng Nói Là Một Xu Hướng Mới?

Ngày nay, việc tìm kiếm thông tin qua giọng nói đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của nhiều...
Tại Sao Tốc độ Tải Trang Lại Quan Trọng Cho SEO?

Tốc độ tải trang không chỉ là một yếu tố kỹ thuật mà còn ảnh hưởng trực tiếp đến thành công của một website trong...