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

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

Hướng dẫn sửa toàn bộ lỗi hay gặp phải trong Antigravity

Antigravity đang được Google định vị như một nền tảng phát triển theo hướng agent-first, nơi AI không chỉ chat bên cạnh editor mà còn...
Tài khoản Antigravity Ultra giá rẻ chỉ 450k/tháng – Mua ngay tại Muathemewpgiare.com

Trong thời gian gần đây, nhu cầu tìm kiếm các công cụ AI hỗ trợ lập trình, làm sản phẩm và tăng tốc quy trình...
Tài khoản Genspark AI giá rẻ có đáng mua không? Phân tích kỹ từ A đến Z

Thời gian gần đây, Genspark xuất hiện ngày càng nhiều trong các cuộc thảo luận về công cụ AI làm việc đa năng. Không ít...
Top địa chỉ mua theme WordPress giá rẻ với theme Flatsome

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 Lý do...
Antigravity Pro và Antigravity Ultra khác nhau như thế nào? Nên mua gói nào?

Khi tìm hiểu về Google Antigravity, rất nhiều người không dừng lại ở câu hỏi “Antigravity là gì” mà sẽ đi ngay tới câu hỏi...
GitHub Pro có đáng mua không? Ai nên nâng cấp để học tập và làm việc hiệu quả hơn?

Với những ai đang học lập trình, làm dự án cá nhân hoặc làm việc trong ngành công nghệ, GitHub gần như là một nền...
Tài khoản GitHub Pro giá rẻ chỉ 130k/tháng tại Muathemewpgiare.com

Trong thời điểm mà học lập trình, làm dự án cá nhân, xây dựng portfolio và phát triển sự nghiệp công nghệ đang trở thành...
Tài khoản Super Grok giá rẻ chỉ 150k/tháng

Trong thời đại công nghệ phát triển mạnh mẽ, trí tuệ nhân tạo đang dần trở thành công cụ hỗ trợ quen thuộc trong học...
Nên mua openclaw AI giá rẻ ở đâu

Trong bối cảnh trí tuệ nhân tạo phát triển mạnh mẽ, OpenClaw AI đã nhanh chóng trở thành một từ khóa “sốt” trên các công...
Tài khoản openclaw AI giá rẻ chỉ 200k/ tháng

Trong bối cảnh công nghệ AI đang phát triển như vũ bão, nhu cầu tiếp cận các công cụ mạnh mẽ để học tập, nghiên...
Nâng Cấp GitHub Student Developer Pack Chính Chủ Giá Rẻ – FREE 30+ Tools + Copilot Pro 2 Năm

Trong thời đại công nghệ phát triển mạnh mẽ như hiện nay, việc sở hữu những công cụ lập trình chất lượng cao là điều...
Antigravity phù hợp với những đối tượng nào?

Không phải công cụ làm web nào cũng phù hợp với tất cả mọi người. Có công cụ sinh ra cho developer, có công cụ...
Antigravity hoạt động như thế nào trong WordPress?

Nếu bạn từng cảm thấy xây dựng website WordPress quá phức tạp, phải cài đủ thứ plugin, chỉnh CSS mệt nghỉ mà giao diện vẫn...
Tài khoản BoltNew AI 490K/năm giá cực rẻ dành cho anh em coder

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ổng quan...
Tài khoản Antigravity giá rẻ chỉ 200K/năm – Mua ngay tại muathemewpgiare.com

Trong thời đại AI phát triển cực nhanh, việc viết code không còn đơn thuần là gõ từng dòng lệnh như trước. Lập trình viên...
Hướng dẫn sử dụng Antigravity cho người mới

Bạn mới nghe về Antigravity.google và đang tò mò: “Nó dùng như thế nào? Có khó không? Có cần giỏi lập trình mới dùng được...