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 Quản trị viên

Quản trị viên

04/04/2025

5 Phút đọc

235 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!

Share Code WordPress, Topcode và Sharecode.vn – Có an toàn không?

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ậnGiới thiệu: Vì sao...
Tổng Hợp Những Tính Năng Mới Nổi Bật Của WordPress 6.9

WordPress 6.9 chính thức ra mắt vào ngày 02/12/2025, mang theo một loạt cải tiến quan trọng tập trung vào Phase 3 của Gutenberg: Collaboration...
Share Code Game Tết Giật Lì Xì

Bạn đang tìm code game Tết 2026 để tổ chức minigame, thu hút người chơi, tăng tương tác cho website hoặc fanpage?Hôm nay mình chia...
Mua Hosting và Máy chủ cao cấp tại AZDIGI có uy tín không?

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ậnGiới thiệu Vai trò...
Những bước đơn giản để tối ưu SEO cho website mới của bạn

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ậnGiới thiệu Tầm quan...
Google Discover là gì? Tìm hiểu về tính năng này

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ậnGiới thiệu về Google...
Tổng hợp kiến thức toàn diện về SEO Google cho người mới bắt đầu

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ậnGiới thiệu về SEO...
Hosting Sinh Viên Giá Rẻ – Chất Lượng – Uy Tín tại Muathemewpgiare.com

Bạn là sinh viên, người mới bắt đầu làm website, hoặc đang cần một gói hosting giá rẻ nhưng vẫn đảm bảo tốc độ –...
Avada vs Flatsome – Đâu là theme bán hàng tốt nhất cho WordPress & 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ậnGiới thiệu Trong thế...
ThemeForest là gì? Giải thích chi tiết & Hướng dẫn mua theme WordPress siêu đơn giản (chuẩn SEO – Update 2025)

Nếu bạn đang xây dựng website và cảm thấy như lạc vào “ma trận” theme WordPress, thì xin chúc mừng – bạn sắp khám phá...
CodeCanyon – Kho plugin, script và source code cao cấp cho mọi dự án website

CodeCanyon là một trong những marketplace uy tín nhất trên thế giới dành cho lập trình viên, webmaster và nhà phát triển web. Nền tảng...
Cloudflare gặp sự cố máy chủ khiến ChatGPT Và Grok tê liệt

Cộng đồng công nghệ toàn cầu đang xôn xao khi hai siêu trí tuệ nhân tạo hàng đầu là ChatGPT (OpenAI) và Grok (xAI) đồng...
Hướng Dẫn Fix Lỗi Vui lòng bỏ chặn challenges.cloudflare.com để tiếp tục

Bạn đang hào hứng truy cập website để tải Theme/Plugin thì màn hình đứng khựng lại với dòng thông báo đỏ: “Vui lòng bỏ chặn...
Tại sao hiện tại Cloudflare bị lỗi toàn cầu

Nếu bạn đang đọc bài viết này, có lẽ bạn hoặc nhiều người dùng khác vừa trải qua những phút giây bối rối khi không...
Khuyến Mãi Black Friday Mua Theme WordPress – Tặng Ngay Drive 2TB

Black Friday đã trở lại với hàng loạt ưu đãi hấp dẫn dành cho cộng đồng làm web WordPress. Nếu bạn đang muốn sở hữu...
Tối ưu hiển thị và sao chép code trong Flatsome bằng Blockquote

Trong quá trình xây dựng website bằng Flatsome, rất nhiều người gặp phải tình trạng mỗi khi đăng code lên bài viết thì nội dung...