CSS gạch chân thú vị

Gần đây tôi đã thêm một hiệu ứng hình ảnh đơn giản vào blog này mà tôi nhanh chóng yêu thích nó. khi bạn di chuột qua các tiêu đề blog, phần gạch chân của liên kết được hiển thị bằng cách tạo hiệu ứng động cho nó từ trung tâm. Bạn có thể thử nó trong biểu ngữ ở trên. Tạo hiệu ứng này dễ dàng một cách đáng ngạc nhiên và không yêu cầu thêm bất kỳ phần tử DOM bổ sung nào thông qua HTML

Điều đầu tiên chúng ta cần làm là đặt

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

4 thành none cho liên kết và đặt

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

5 thành

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

6 để chúng ta có thể định vị phần tử đường viền của mình so với nó. Để đơn giản, chúng tôi cũng sẽ đảm bảo rằng liên kết không đổi màu khi di chuột

a {
  position: relative;
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
}

Tiếp theo, chúng tôi muốn thêm đường viền và ẩn nó thông qua một phép biến đổi. Chúng ta có thể làm điều này bằng cách sử dụng phần tử giả

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

7 và đặt thang X của nó thành

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

8

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

Ở dưới cùng, chúng tôi yêu cầu phần tử tạo hiệu ứng thay đổi

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

0 với thời lượng là

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

1 giây. Để dòng xuất hiện, bây giờ chúng ta chỉ cần làm cho phần tử hiển thị lại trên

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

2 bằng cách đặt tỷ lệ X của nó trở lại

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

3

a:hover::before {
  transform: scaleX(1);
}

Cùng với đó, chúng tôi đã có một gạch dưới mở rộng khi di chuột

Di chuột vào văn bản này

Đây là tất cả các mã, được thực hiện cùng nhau

a {
  position: relative;
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
}

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

a:hover::before {
  transform: scaleX(1);
}

Thay đổi hướng của hoạt ảnh dòng

Chúng ta có thể thay đổi hướng của hoạt ảnh bằng cách điều chỉnh thuộc tính

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

4 của dòng.

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

4 đại diện cho nguồn gốc của sự biến đổi của một phần tử. Nó được đặt ở giữa đối tượng theo mặc định, làm cho phần tử chia tỷ lệ từ điểm trung tâm của nó trong trường hợp này. Để tạo hiệu ứng cho nó từ bên trái, chúng ta có thể đặt điểm gốc ở bên trái (

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

6) và để tạo hiệu ứng cho nó từ bên phải, chúng ta có thể đặt điểm gốc ở bên trái (

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

7)

Di chuột vào tôi (từ bên trái) Di chuột vào tôi (từ bên phải)

Để thay đổi hướng, hãy khai báo

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

4 trên phần tử giả

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

7 của phần tử

a:hover::before {
  transform: scaleX(1);
}

0, như vậy