[ad_1]
Leto tạo ra một hiệu ứng CSS thuần túy thay đổi màu của liên kết văn bản trên hover, nhưng trượt màu mới đó thay vì chỉ đổi màu.
Có bốn kỹ thuật khác nhau mà chúng ta có thể sử dụng để làm điều này. Chúng ta hãy nhìn vào những điều đó trong khi chú ý đến những điều quan trọng, như khả năng tiếp cận, hiệu suất và hỗ trợ trình duyệt trong tâm trí.
Hãy để Bắt đầu từ!
Kỹ thuật 1: Sử dụng clip nền: văn bản
Tại thời điểm viết, thuộc tính clip : text 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. Đánh dấu bao gồm một liên kết HTML duy nhất ( ) để tạo siêu liên kết:
Liên kết di chuột
Chúng ta có thể bắt đầu thêm kiểu vào siêu liên kết. Sử dụng tràn: ẩn 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:
một {
vị trí: tương đối;
hiển thị: khối nội tuyến;
cỡ chữ: 2em;
trọng lượng phông chữ: 800;
màu sắc: hoàng gia;
tràn: ẩn;
}
Chúng tôi sẽ cần sử dụng độ dốc tuyến tính với mức dừng cứng ở mức 50% so với màu bắt đầu, chúng tôi muốn liên kết cũng như màu mà nó sẽ thay đổi thành:
một {
/* Giống như trước */
nền: gradient tuyến tính (sang phải, midnightblue, midnightblue 50%, royalblue 50%);
}
Cho phép sử dụng clip nền để cắt độ dốc và giá trị văn bản để hiển thị văn bản. Chúng tôi cũng sẽ sử dụng các thuộc tính kích thước nền và vị trí nền để xuất hiện màu bắt đầu:
một {
/* Giống như trước */
clip nền: văn bản;
-webkit-nền-clip: văn bản;
-webkit-text-fill-color: trong suốt;
kích thước nền: 200% 100%;
vị trí nền: 100%;
}
Cuối cùng, hãy cho phép Thêm phần chuyển đổi CSS và : hover CSS giả lớp vào siêu liên kết. Để có 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 nền-vị trí :
một {
/* Giống như trước */
chuyển tiếp: nền-vị trí dễ dàng 275ms;
}
a: di chuột {
vị trí nền: 0 100%;
}
Mặc dù kỹ thuật này không đạt được hiệu ứng di chuột, Safari và Chrome sẽ cắt các trang trí văn bản và bóng, nghĩa là chúng đã thắ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 thuộc tính dữ liệu chứa cùng văn bản với thẻ trong và đặt chiều rộng (điền văn bản từ trái sang phải hoặc từ phải sang trái) hoặc chiều cao (điền văn bản từ trên xuống dưới hoặc từ dưới lên trên), từ 0% đến 100% khi di chuột.
Đây là đánh dấu:
Liên kết di chuột
CSS tương tự như kỹ thuật trước đó trừ đi các thuộc tính CSS nền. Thuộc tính trang trí văn bản sẽ hoạt động tại đây:
một {
vị trí: tương đối;
hiển thị: khối nội tuyến;
cỡ chữ: 2em;
màu sắc: hoàng gia;
trọng lượng phông chữ: 800;
trang trí văn bản: gạch chân;
tràn: ẩn;
}
Đây là khi chúng ta cần sử dụng nội dung từ thuộc tính data-content . Nó sẽ được định vị phía trên nội dung trong thẻ . Chúng ta có thể sử dụng một mẹo nhỏ để sao chép văn bản trong thuộc tính dữ liệu và hiển thị thông qua chức năng attr () trên thuộc tính nội dung của phần tử :: trước
a :: trước {
vị trí: tuyệt đối;
nội dung: attr (dữ liệu-nội dung); / * In giá trị của thuộc tính * /
đầu trang: 0;
trái: 0;
màu: midnightblue;
trang trí văn bản: gạch chân;
tràn: ẩn;
chuyển tiếp: chiều rộng dễ dàng 275ms;
}
Để giữ cho văn bản không bị gói sang dòng tiếp theo, khoảng trắng: nowrap sẽ được áp dụng. Để thay đổi màu tô 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ả :: trước và có chiều rộng bắt đầu từ 0:
a :: trước {
/* Giống như trước */
chiều rộng: 0;
khoảng trắng: nowrap;
}
Tăng chiều rộng lên 100% lên :: trước phần tử giả để hoàn thành hiệu ứng văn bản khi di chuột:
a: di chuột :: trước {
chiều rộng: 100%;
}
Mặc dù kỹ thuật này thực hiện thủ thuật, sử dụng các thuộc tính width hoặc sẽ không tạo ra chuyển tiếp CSS hiệu suất. Tốt nhất là sử dụng các thuộc tính hoặc opacity để đạt được chuyển đổi mượt mà, 60fps.
Sử dụng trang trí văn bản Thuộc tính CSS 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 một bản demo giới thiệu điều này bằng cách sử dụng kỹ thuật tiếp theo: thuộc tính clip CSS.
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 clip 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 bên 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ả :: trước nhưng CSS thì khác:
a :: trước {
vị trí: tuyệt đối;
nội dung: attr (dữ liệu-nội dung);
màu: midnightblue;
trang trí văn bản: gạch chân;
đường dẫn clip: đa giác (0 0, 0 0, 0% 100%, 0 100%);
chuyển tiếp: clip-path dễ dàng 275ms;
}
Không giống như các kỹ thuật trước đây, trang trí văn bản: gạch chân phải được khai báo thành :: trước phần tử giả để màu tô vào phần gạch chân khi di chuột.
Bây giờ hãy để Tìm hiểu về CSS cho kỹ thuật clip-path :
clip-path: đa giác (0 0, 0 0, 0% 100%, 0 100%);
Các đỉnh đa giác của thuộc tính clip được đặt theo tỷ lệ phần trăm để xác định tọa độ theo thứ tự được viết:
-
0 0= trên cùng bên trái -
0 0= trên cùng bên phải -
dưới cùng bên phải -
0 100%= dưới cùng bên trái
Hướng của hiệu ứng điền có thể được thay đổi bằng cách sửa đổi tọa độ. Bây giờ chúng ta có một ý tưởng cho 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: di chuột :: trước {
đường dẫn clip: đa giác (0 0, 100% 0, 100% 100%, 0 100%);
}
Kỹ thuật này hoạt động khá tốt, nhưng lưu ý rằng hỗ trợ cho thuộc tính clip khác nhau giữa các trình duyệt. Tạo chuyển tiếp CSS bằng clip-path là cách thay thế tốt hơn so với sử dụng kỹ thuật width / height ; tuy nhiên, nó ảnh hưởng đến sơn trình duyệt.
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 mặt nạ với phần tử . Vì chúng tôi sẽ sử dụng nội dung trùng lặp trong một yếu tố riêng biệt, chúng tôi sẽ sử dụng aria-hidden = "true" để cải thiện khả năng truy cập - sẽ ẩn nó khỏi trình đọc màn hình để nội dung không được đọc hai lần:
Liên kết Hover
CSS cho phần tử chứa một quá trình chuyển đổi sẽ bắt đầu từ bên trái:
span {
vị trí: tuyệt đối;
đầu trang: 0;
trái: 0;
tràn: ẩn;
biến đổi: translateX (-100%);
chuyển tiếp: biến đổi dễ dàng 275ms;
}
Tiếp theo, chúng ta cần lấy để trượt bên phải như thế này:
Để thực hiện việc này, chúng tôi sẽ sử dụng chức năng CSS translateX () và đặt thành 0:
a: nhịp di chuột {
biến đổi: translateX (0);
}
Sau đó, chúng tôi sẽ sử dụng phần tử giả :: trước cho một lần nữa sử dụng thuộc tính dữ liệu mà chúng tôi đã làm trước đây. Chúng tôi sẽ thiết lập vị trí bằng cách dịch nó 100% dọc theo trục x.
span :: trước {
hiển thị: khối nội tuyến;
nội dung: attr (dữ liệu-nội dung);
màu: midnightblue;
biến đổi: translateX (100%);
chuyển tiếp: biến đổi dễ dàng 275ms;
trang trí văn bản: gạch chân;
}
Giống như phần tử vị trí của :: trước phần tử giả cũng sẽ được đặt thành dịchX (0) :
a: di chuột span :: trước {
biến đổi: translateX (0);
}
Mặc dù kỹ thuật này là tương thích nhiều trình duyệt nhất trong nhóm, nhưng nó đòi hỏi 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 các lần lặp lại và do đó tạo ra các chuyển tiếp CSS 60fps 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 nó hoàn toàn có thể trượt trong sự thay đổi màu sắc trên văn bản. Nó có một hiệu ứng nhỏ gọn làm cho các liên kết cảm thấy tương tác hơn một chút.
Source link: webdesignernews