CSS hoạt hình màu nền văn bản

Hãy tạo một hiệu ứng CSS thuần túy để thay đổi màu của liên kết văn bản khi di chuột… nhưng trượt màu mới đó vào thay vì chỉ hoán đổi màu

Có bốn kỹ thuật khác nhau chúng ta có thể sử dụng để làm điều này. Hãy xem xét những điều đó trong khi lưu tâm đến những điều quan trọng, chẳng hạn như khả năng truy cập, hiệu suất và hỗ trợ trình duyệt

Bắt đầu nào

Kỹ thuật 1. Sử dụng clip nền. chữ

Tại thời điểm viết bài, thuộc tính

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

8 là một tính năng thử nghiệm và không được hỗ trợ trong Internet Explorer 11 trở xuống

Kỹ thuật này liên quan đến việc tạo văn bản loại trực tiếp với độ dốc dừng cứng. Phần đánh dấu bao gồm một phần tử liên kết HTML đơn (

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

9) để tạo siêu liên kết

Link Hover

Chúng ta có thể bắt đầu thêm các kiểu vào siêu liên kết. Sử dụng

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

0 sẽ cắt bất kỳ nội dung nào bên ngoài siêu liên kết trong quá trình chuyển đổi di chuột

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

Chúng tôi sẽ cần sử dụng một gradient tuyến tính với điểm dừng cứng ở mức 50% so với màu bắt đầu mà chúng tôi muốn liên kết cũng như màu mà nó sẽ thay đổi thành

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Hãy sử dụng

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

1 để cắt gradient và giá trị

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

2 để hiển thị văn bản. Chúng tôi cũng sẽ sử dụng các thuộc tính

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

3 và

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

4 để màu bắt đầu xuất hiện

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

0

Cuối cùng, hãy thêm thuộc tính CSS

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

5 và lớp giả CSS

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

6 vào siêu liên kết. Để liên kết điền từ trái sang phải khi di chuột, hãy sử dụng thuộc tính

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

4

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

4

Dự phòng nhúng CodePen

Mặc dù kỹ thuật này đạt được hiệu ứng di chuột, nhưng Safari và Chrome sẽ cắt bớt phần trang trí và bóng của văn bản, nghĩa là chúng sẽ không được hiển thị. Áp dụng các kiểu văn bản, chẳng hạn như gạch chân, với thuộc tính CSS trang trí văn bản sẽ không hoạt động. Có lẽ xem xét sử dụng các phương pháp khác khi tạo gạch chân

Kỹ thuật 2. Sử dụng chiều rộng/chiều cao

Điều này hoạt động bằng cách sử dụng một thuộc tính dữ liệu chứa cùng một văn bản như trong thẻ

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

9 và đặt

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

9 (điền văn bản từ trái sang phải hoặc từ phải sang trái) hoặc

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

00 (điền văn bản từ trên xuống dưới).

Đây là đánh dấu

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

8

CSS tương tự như kỹ thuật trước trừ các thuộc tính CSS nền. Tài sản

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

01 sẽ hoạt động ở đây

Link Hover

0

Đây là lúc chúng ta cần sử dụng nội dung từ thuộc tính

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

02. Nó sẽ được định vị phía trên nội dung trong thẻ

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

9. Chúng ta có thể sử dụng một mẹo nhỏ hay là sao chép văn bản trong thuộc tính dữ liệu và hiển thị nó qua hàm

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

04 trên thuộc tính nội dung của phần tử giả

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

05 của phần tử

Link Hover

5

Để giữ cho văn bản không bị ngắt dòng sang dòng tiếp theo,

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

06 sẽ được áp dụng. Để thay đổi màu tô của liên kết, hãy đặt giá trị cho thuộc tính CSS màu bằng cách sử dụng phần tử giả

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

05 và để

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

9 bắt đầu từ 0

Link Hover

9

Tăng chiều rộng lên 100% thành 

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

05 phần tử giả để hoàn thành hiệu ứng văn bản khi di chuột

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

1

Dự phòng nhúng CodePen

Mặc dù kỹ thuật này thực hiện thủ thuật, nhưng việc sử dụng các thuộc tính

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

9 hoặc

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

00 sẽ không tạo ra quá trình chuyển đổi CSS hiệu quả. Tốt nhất là sử dụng thuộc tính

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

42 hoặc

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

43 để đạt được quá trình chuyển đổi 60 khung hình/giây mượt mà

Sử dụng thuộc tính CSS

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

01 có thể cho phép các kiểu gạch chân khác nhau xuất hiện trong quá trình chuyển đổi CSS. Tôi đã tạo bản trình diễn giới thiệu điều này bằng kỹ thuật tiếp theo. thuộc tính CSS

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

45

Dự phòng nhúng CodePen

Kỹ thuật 3. Sử dụng đường dẫn clip

Đối với kỹ thuật này, chúng tôi sẽ sử dụng thuộc tính CSS

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

46 với hình dạng đa giác. Đa giác sẽ có bốn đỉnh, với hai trong số chúng mở rộng sang phải khi di chuột

Đánh dấu giống như kỹ thuật trước. Chúng tôi sẽ sử dụng lại phần tử giả

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

05, nhưng CSS thì khác

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

0

Không giống như các kỹ thuật trước,

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

48 phải được khai báo với

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

49 để tô màu cho phần gạch chân khi di chuột

Bây giờ, hãy xem CSS cho kỹ thuật

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

46

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

1

Các đỉnh của đa giác thuộc tính

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

46 được đặt theo tỷ lệ phần trăm để xác định tọa độ theo thứ tự đã viết

• a {
    position: relative;
    display: inline-block;
    font-size: 2em;
    font-weight: 800;
    color: royalblue;
    overflow: hidden;
  }

  82 = trên cùng bên trái

• a {
    position: relative;
    display: inline-block;
    font-size: 2em;
    font-weight: 800;
    color: royalblue;
    overflow: hidden;
  }

  82 = trên cùng bên phải

• a {
    position: relative;
    display: inline-block;
    font-size: 2em;
    font-weight: 800;
    color: royalblue;
    overflow: hidden;
  }

  84 = dưới cùng bên phải

• a {
    position: relative;
    display: inline-block;
    font-size: 2em;
    font-weight: 800;
    color: royalblue;
    overflow: hidden;
  }

  85 = phía dưới bên trái

Hướng của hiệu ứng lấp đầy có thể được thay đổi bằng cách sửa đổi tọa độ. Bây giờ chúng ta đã có ý tưởng về tọa độ, chúng ta có thể làm cho đa giác mở rộng sang bên phải khi di chuột

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

2

Dự phòng nhúng CodePen

Kỹ thuật này hoạt động khá tốt, nhưng lưu ý rằng hỗ trợ cho thuộc tính

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

46 khác nhau giữa các trình duyệt. Tạo chuyển tiếp CSS với

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

46 là một giải pháp thay thế tốt hơn so với sử dụng kỹ thuật

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

9/

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

00;

Kỹ thuật 4. sử dụng biến đổi

Đánh dấu cho kỹ thuật này sử dụng phương pháp tạo mặt nạ có phần tử

Link Hover

00. Vì chúng tôi sẽ sử dụng nội dung trùng lặp trong một thành phần riêng biệt, nên chúng tôi sẽ sử dụng

Link Hover

01 để cải thiện khả năng truy cập — điều đó sẽ ẩn nội dung đó khỏi trình đọc màn hình để nội dung không bị đọc hai lần

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

3

CSS cho phần tử

Link Hover

00 chứa quá trình chuyển đổi sẽ bắt đầu từ bên trái

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

4

Tiếp theo, chúng ta cần để

Link Hover

00 trượt sang phải như thế này

Để làm điều này, chúng tôi sẽ sử dụng chức năng CSS

Link Hover

04 và đặt nó thành 0

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

5

Sau đó, chúng tôi sẽ sử dụng phần tử giả

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

05 cho

Link Hover

00, một lần nữa sử dụng thuộc tính

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

02 mà chúng tôi đã làm trước đây. Chúng tôi sẽ đặt vị trí bằng cách dịch nó 100% dọc theo trục x

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

6

Giống như phần tử

Link Hover

00, vị trí của phần tử giả

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

05 cũng sẽ được đặt thành ____250

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

7

Dự phòng nhúng CodePen

Mặc dù kỹ thuật này tương thích với nhiều trình duyệt nhất trong nhóm, nhưng nó yêu cầu nhiều đánh dấu và CSS hơn để đạt được điều đó. Điều đó nói rằng, sử dụng thuộc tính CSS biến đổi là rất tốt cho hiệu suất vì nó không kích hoạt sơn lại và do đó tạo ra các chuyển đổi CSS 60 khung hình/giây mượt mà

Ở đó chúng tôi có nó

Chúng tôi chỉ xem xét bốn kỹ thuật khác nhau để đạt được hiệu quả tương tự. Mặc dù mỗi cái đều có ưu và nhược điểm nhưng bạn có thể thấy rằng hoàn toàn có thể trượt chuyển màu trên văn bản. Đó là một hiệu ứng nhỏ gọn làm cho các liên kết có cảm giác tương tác hơn một chút