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

3 Phút đọc

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

12 Lỗ Hổng Bảo Mật PHP Nguy Hiểm: Nguyên Nhân, Rủi Ro Và Cách Phòng Tránh Năm 2026

Một website hoạt động ổn định chưa chắc đã là một website an toàn. Đằng sau giao diện đẹp mắt, tốc độ tải nhanh và...
Tài khoản Claude Code có dùng chung được không? Giải đáp chi tiết

Tài khoản Claude Code có dùng chung được không? Đây là câu hỏi được khá nhiều người quan tâm, đặc biệt khi muốn mua Claude...
Top 10+ đơn vị cung cấp tên miền uy tín tại Việt Nam

Chọn đơn vị cung cấp tên miền uy tín là bước tưởng nhỏ nhưng lại ảnh hưởng trực tiếp đến website, thương hiệu và khả...
Astra Pro Trọn Bộ: Theme Astra, Key Kích Hoạt Nhiều Web

Bạn đang tìm kiếm một giải pháp toàn diện để xây dựng trang web WordPress chuyên nghiệp và hiệu quả? Astra Pro Trọn Bộ chính...
Plugin Thanh Toán WordPress + App Đọc Giao Dịch FREE 1 Năm

MUATHEMEWPGIARE.COM chính thức thông báo chương trình ưu đãi mới từ ngày 20/09/2026: khách hàng có đơn hàng từ 1.500.000đ sẽ được tặng miễn phí...
Top 100 Model AI Mạnh Nhất Thế Giới 2026: Phân Tích Chi Tiết

Thế giới trí tuệ nhân tạo năm 2026 đang bước sang một giai đoạn hoàn toàn khác so với thời kỳ chỉ vài mô hình...
GPT-6 Astra: Thế hệ trí tuệ mới với khả năng suy luận, lập trình vượt trội

GPT-6 Astra đang được OpenAI giới thiệu như một thế hệ mô hình trí tuệ nhân tạo mới, tập trung mạnh vào khả năng suy...
Đại lễ 2/9 – Giảm giá đến 40% tại MuathemeWPgiare.com

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ậnMỪNG ĐẠI LỄ 2/9...
Kinh nghiệm chọn theme WordPress phù hợp cho website 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...
Kiểm tra tốc độ load theme: Hướng dẫn đơn giản trước khi mua

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...
Hướng dẫn chọn theme WordPress chuẩn SEO cho website hiệu quả

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...
Lý do bạn nên chọn thiết kế website uy tín tại Ninh Bình

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ò...
Claude qua GitHub Copilot: so sánh Claude Code và GitHub Copilot trong lập trình

Trong thế giới phát triển phần mềm đang ngày càng tiến bộ, sự xuất hiện của các trợ lý lập trình dựa trên trí tuệ...
Thông Báo Chính Thức: Ngừng Cung Cấp Website Và Theme Cho Lĩnh Vực Tài Khoản Game, Vật Phẩm Ảo

Kính gửi Quý khách hàng và Quý đối tác, Để tuân thủ các quy định của pháp luật hiện hành, đồng thời định hướng phát...
Có nên mua Theme trên ThemeForest? Phân tích ưu, nhược điểm

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ậnCó nên mua Theme...
Mua Theme WordPress: Hỗ trợ sử dụng theme và plugin

Trong thế giới số hóa ngày nay, việc sở hữu một trang web chuyên nghiệp là điều thiết yếu đối với bất kỳ cá nhân...