Cách tạo hiệu ứng gạch chân sáng khi di chuột qua tiêu đề bài viết

aHí

Cập nhật: 16 tháng 10, 2024 • 0 • phút để đọc

Mục lục bài viết

Cách tạo hiệu ứng gạch chân sáng khi di chuột qua tiêu đề bài viết

Trang web của bạn chính là bộ mặt trực tuyến của bạn. Hiệu ứng trực quan giúp trang web trở nên sinh động, tạo cảm giác hiện đại và thu hút người dùng. Một trong những hiệu ứng đơn giản nhưng hiệu quả là gạch chân sáng khi người dùng di chuột qua tiêu đề bài viết. Trong bài viết này, tôi sẽ hướng dẫn bạn cách thực hiện điều đó trên nền tảng Blogspot chỉ với vài dòng CSS đơn giản. Bạn không cần phải là một lập trình viên chuyên nghiệp để tạo ra hiệu ứng này, hãy cùng khám phá nhé!

Lợi ích của hiệu ứng gạch chân sáng

Hiệu ứng gạch chân sáng không chỉ làm cho trang web của bạn trông ấn tượng mà còn tăng cường trải nghiệm người dùng. Đây là một số lý do vì sao bạn nên áp dụng hiệu ứng này:

Thu hút sự chú ý: Khi người dùng di chuột qua tiêu đề, hiệu ứng gạch chân sáng tạo ra sự tương tác trực quan, thu hút ánh nhìn vào bài viết của bạn.
Tăng tính chuyên nghiệp: Những hiệu ứng tinh tế như thế này mang lại cảm giác chuyên nghiệp và hiện đại cho website.
Cải thiện trải nghiệm người dùng: Hiệu ứng tạo cảm giác tương tác, khiến người dùng dễ dàng nhận biết những gì họ đang tương tác và cảm thấy thú vị khi duyệt nội dung.

Cách tạo hiệu ứng gạch chân sáng

Bước 1: Truy cập vào khu vực chỉnh sửa HTML của Blogspot

Đăng nhập vào tài khoản Blogspot của bạn.
Vào Giao diện > Chỉnh sửa HTML.

Bước 2: Thêm CSS để tạo hiệu ứng

Bạn chỉ cần thêm đoạn mã CSS sau đây vào phần <head> trong file HTML của trang Blogspot của bạn. Đoạn mã này sẽ tạo hiệu ứng gạch chân sáng khi di chuột qua tiêu đề bài viết.

.post-title.entry-title {
  font-size: 30px; /* Kích thước chữ */
  color: #333; /* Màu ban đầu của tiêu đề */
  transition: color 0.4s ease-in-out, transform 0.3s ease-in-out; /* Hiệu ứng chuyển đổi mượt mà */
  position: relative;
}

.post-title.entry-title:hover {
  color: #ff6600; /* Đổi màu chữ khi hover */
  background: linear-gradient(90deg, #ff6600, #ffcc00, #33ccff, #ff6600); /* Gradient động trên chữ */
  background-clip: text;
  -webkit-background-clip: text; /* Hiển thị hiệu ứng gradient động */
  color: transparent; /* Để phần màu nền gradient hiện ra */
  text-shadow: 0 0 10px #6DC0AE; /* Hiệu ứng sáng mờ quanh chữ */
  transform: scale(1.1); /* Phóng to chữ khi di chuột */
  animation: textColorShift 2s infinite; /* Hiệu ứng chuyển đổi màu liên tục */
}

@keyframes textColorShift {
  0% {
      background-position: 0% 50%;
  }
  100% {
      background-position: 100% 50%;
  }
}

.post-title.entry-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6600, #33ccff, #ffcc00, #ff6600); /* Gradient nhiều màu sắc */
  transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1), background 0.5s ease; /* Hiệu ứng mượt mà cho phần gạch chân */
  transform: translateX(-50%);
}

.post-title.entry-title:hover::after {
  width: 100%; /* Gạch chân cả chiều rộng tiêu đề */
  background-size: 200%; /* Tạo cảm giác hiệu ứng sóng chuyển động */
  animation: underlineWave 2s infinite; /* Hiệu ứng sóng chạy */
}

@keyframes underlineWave {
  0% {
      background-position: 0% 50%;
  }
  100% {
      background-position: 100% 50%;
  }
}

Bước 3: Điều chỉnh theo phong cách của bạn

Màu sắc: Bạn có thể thay đổi màu sắc của tiêu đề và màu gạch chân sáng để phù hợp với phong cách của trang web bằng cách thay đổi giá trị của thuộc tính color và background-color.
Độ dày gạch chân: Điều chỉnh giá trị height nếu bạn muốn gạch chân dày hơn hoặc mỏng hơn.
Vị trí gạch chân: Thuộc tính bottom giúp bạn điều chỉnh khoảng cách của gạch chân so với dòng chữ tiêu đề.

Bước 4: Lưu và xem kết quả

Sau khi đã thêm mã CSS, nhấn Lưu giao diện và kiểm tra trang web của bạn để thấy hiệu ứng hoạt động. Khi người dùng di chuột qua tiêu đề bài viết, một đường gạch chân sáng sẽ dần dần xuất hiện, tạo ra cảm giác tương tác hấp dẫn.

Tạo sự khác biệt với hiệu ứng tương tác

Một trang web với thiết kế tối giản nhưng đầy tính sáng tạo sẽ để lại ấn tượng sâu sắc cho người dùng. Bạn không cần phải quá cầu kỳ với những hiệu ứng phức tạp, đôi khi những chi tiết nhỏ như gạch chân sáng lại mang đến hiệu quả vượt mong đợi. Đặc biệt, khi bạn đang sử dụng nền tảng Blogspot – một công cụ tạo blog đơn giản nhưng mạnh mẽ, việc thêm hiệu ứng CSS là cách nhanh nhất để cá nhân hóa và làm nổi bật blog của mình.
Hãy thử tưởng tượng: bạn tạo ra một bài viết chất lượng, và với hiệu ứng gạch chân sáng, tiêu đề của bài viết trở nên nổi bật hơn, cuốn hút người đọc hơn. Khi người dùng nhìn thấy một sự chuyển động nhẹ nhàng, họ sẽ có xu hướng dừng lại và đọc nội dung. Điều này đồng nghĩa với việc thời gian trên trang của bạn tăng lên, và khi đó, Google cũng đánh giá cao blog của bạn hơn về mặt SEO. Hiệu ứng không chỉ là yếu tố thẩm mỹ mà còn là công cụ giúp tăng cường khả năng tương tác với người dùng.

Kết luận

Hiệu ứng gạch chân sáng khi di chuột qua tiêu đề bài viết là một cách tuyệt vời để nâng cấp giao diện Blogspot của bạn. Với chỉ vài dòng CSS đơn giản, bạn đã có thể tạo ra một trang blog hiện đại, bắt mắt và thu hút người đọc. Đừng quên rằng những chi tiết nhỏ như vậy có thể tạo ra sự khác biệt lớn về cảm nhận và trải nghiệm của người dùng.

aHí ★ Tôi không thể, bạn không thể, nhưng chúng ta có thể ★

anh Hí blogger