Hướng dẫn underline hover effect css codepen - gạch dưới hiệu ứng di chuột css codepen

Đăng ký nhận bản tin của tôi và không bao giờ bỏ lỡ các bài viết sắp tới của tôi

Những điều nhỏ bé đôi khi quan trọng. Bạn không bao giờ biết làm thế nào hài lòng khách truy cập trang web của bạn hoặc khách hàng có thể với các điều chỉnh nhỏ mà bạn thực hiện, như thêm một hoạt hình lơ lửng vào trang web của bạn.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách cải thiện các liên kết trang web của mình từ điều này (liên kết HTML mà không có Hover Underline Animation):

Để điều này (một liên kết HTML với hoạt hình gạch chân di chuột):

Bạn có thể kiểm tra Codepen ở đây.

Phần HTML

Giả sử, bạn có thẻ neo HTML này bên dưới để điều hướng người dùng đến trang web khác:

<nav>
  <a href="#" class="hover-underline-animation">
    Hover on me to see the effect 🖱
  </a> 
</nav>

Theo mặc định, mã trên sẽ tạo ra điều này:

Hãy thêm một số kiểu CSS vào chúng:

nav{
  background: #202020;
  padding: 10px;
}

.hover-underline-animation {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
}

Từ mã CSS ở trên:

• Chúng tôi đã cho thẻ nav màu nền màu đen và đệm để tạo không gian 10px xung quanh nội dung của nó.
• Chúng tôi cũng làm cho liên kết neo được định vị tương đối vì sau đó chúng tôi sẽ thêm một phần tử giả định vị tuyệt đối sau nó.
• Cuối cùng, chúng tôi đã tạo liên kết neo màu trắng để hiển thị trên nền đen và loại bỏ lớp lót mặc định với thuộc tính text-decoration.

Liên kết neo của chúng tôi bây giờ sẽ trông giống như thế này:

Bước 1 - Thêm gạch chân vào văn bản thẻ neo

Để đạt được hiệu ứng gạch chân, chúng tôi sẽ sử dụng phần tử giả ::after để tạo gạch chân tùy chỉnh cho liên kết neo vì chúng tôi không thể sửa đổi gạch chân mặc định đi kèm với nó và phương pháp này sẽ giúp bạn dễ dàng dễ dàng Thêm hiệu ứng hoạt hình gạch chân vào bất kỳ văn bản nào khác.

Cập nhật CSS của bạn với mã bên dưới:

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffff00;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

Từ mã CSS ở trên:

• Chúng tôi đã cho thẻ nav màu nền màu đen và đệm để tạo không gian 10px xung quanh nội dung của nó.
• Chúng tôi cũng làm cho liên kết neo được định vị tương đối vì sau đó chúng tôi sẽ thêm một phần tử giả định vị tuyệt đối sau nó.

Cuối cùng, chúng tôi đã tạo liên kết neo màu trắng để hiển thị trên nền đen và loại bỏ lớp lót mặc định với thuộc tính text-decoration.

Liên kết neo của chúng tôi bây giờ sẽ trông giống như thế này:

Bước 1 - Thêm gạch chân vào văn bản thẻ neo

Để đạt được hiệu ứng gạch chân, chúng tôi sẽ sử dụng phần tử giả ::after để tạo gạch chân tùy chỉnh cho liên kết neo vì chúng tôi không thể sửa đổi gạch chân mặc định đi kèm với nó và phương pháp này sẽ giúp bạn dễ dàng dễ dàng Thêm hiệu ứng hoạt hình gạch chân vào bất kỳ văn bản nào khác.

.hover-underline-animation::after{
  ...
  transform: scaleX(0);
}

Cập nhật CSS của bạn với mã bên dưới:

Chúng tôi đã nhắm mục tiêu vào phần tử giả của thẻ neo để tạo hiệu ứng gạch chân trên văn bản.

Tiếp theo, chúng tôi đã chỉ định thuộc tính chuyển đổi của lớp gạch chân để di chuyển từ trái sang phải ở dưới cùng của phần tử được định vị với thuộc tính chuyển đổi được chỉ định (chúng tôi sẽ thêm thuộc tính Transform sau).

Thẻ neo của chúng tôi sẽ trông giống như thế này:

.hover-underline-animation:hover::after {
  transform: scaleX(1);
}

Bước 2 - Việc giấu văn bản theo mặc định theo mặc định

Vì chúng tôi chỉ muốn thẻ neo được gạch chân khi lơ lửng, chúng tôi có thể thêm chức năng biến đổi ____10 CSS để ẩn nó theo mặc định.

Hàm scaleX ()

.hover-underline-animation:hover::after {
  ...
  transform-origin: bottom left;
}

Đặt hàm

nav{
  background: #202020;
  padding: 10px;
}

.hover-underline-animation {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
}

nav{
  background: #202020;
  padding: 10px;
}

.hover-underline-animation {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
}

Bây giờ chúng tôi có ẩn được ẩn theo mặc định, như được hiển thị bên dưới:

Bước 3 - Hiển thị gạch chân văn bản trên di chuột

Bước cuối cùng là hiển thị gạch chân văn bản trên chuột di chuột và đây là mã trông như thế nào:

Bây giờ, việc gạch chân phải được nhìn thấy trên chuột di chuột như thế này:

• Bạn sẽ nhận thấy rằng hình ảnh động gạch chân chỉ di chuyển theo một hướng (đến từ phía dưới bên phải và thoát qua phía dưới bên phải), đây là từ thuộc tính

  nav{
    background: #202020;
    padding: 10px;
  }
  
  .hover-underline-animation {
    position: relative;
    color: #FFFFFF;
    text-decoration: none;
  }
  

  3 mà chúng tôi đã tuyên bố trước đó.
• Chúng ta có thể cải thiện hoạt hình gạch chân di chuột bằng cách thêm giá trị ngược lại của

  nav{
    background: #202020;
    padding: 10px;
  }
  
  .hover-underline-animation {
    position: relative;
    color: #FFFFFF;
    text-decoration: none;
  }
  

  3 ban đầu vào trạng thái di chuột. Như thế này:

Điều này sẽ làm cho gạch chân xuất phát từ phía dưới bên trái và sau đó thoát qua phía dưới bên phải, như hình bên dưới:

Bạn có thể tìm thấy mã hoàn chỉnh ở đây

• Gói lên 🏁
• Trong hướng dẫn này, bạn đã học được cách thêm hoạt hình gạch chân để cải thiện các thẻ và văn bản neo trên trang web của bạn.

Liên kết hữu ích

Tìm hiểu thêm về chức năng

nav{
  background: #202020;
  padding: 10px;
}

.hover-underline-animation {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
}

Làm thế nào để bạn gạch chân lơ lửng trong CSS?

Làm thế nào để bạn gạch chân trong CSS?

Làm thế nào để bạn thay đổi màu sắc của một gạch chân trong CSS?

Làm thế nào để bạn gạch chân trong HTML?