Hiệu ứng di chuột CSS thú vị sử dụng cắt nền, mặt nạ và 3D

Bây giờ chúng ta đã xem qua một loạt bài đăng về các cách tiếp cận thú vị đối với hiệu ứng di chuột qua CSS. Chúng tôi bắt đầu với một nhiều ví dụ sử dụng CSS background tài sản, sau đó chuyển sang text-shadow tài sản ở đâu về mặt kỹ thuật chúng tôi không sử dụng bất kỳ bóng đổ nào. Chúng tôi cũng kết hợp chúng với các biến CSS và calc() để tối ưu hóa mã và giúp dễ quản lý.

Trong bài viết này, chúng tôi sẽ xây dựng hai bài viết đó để tạo các hoạt ảnh di chuột qua CSS phức tạp hơn nữa. Chúng ta đang nói về việc cắt nền, mặt nạ CSS và thậm chí cả việc chúng ta đang làm ướt với các phối cảnh 3D. Nói cách khác, lần này chúng ta sẽ khám phá các kỹ thuật nâng cao và đẩy giới hạn của những gì CSS có thể làm với các hiệu ứng di chuột!

---

Đây chỉ là hương vị của những gì chúng tôi đang làm:

Sử dụng hiệu ứng di chuột background-clip

Hãy nói về background-clip. Thuộc tính CSS này chấp nhận một text giá trị từ khóa cho phép chúng tôi áp dụng các gradient cho văn bản của một phần tử thay vì thực tế lý lịch.

Vì vậy, ví dụ: chúng ta có thể thay đổi màu của văn bản khi di chuột như khi chúng ta sử dụng color nhưng theo cách này, chúng tôi tạo hoạt ảnh cho sự thay đổi màu sắc:

Tất cả những gì tôi đã làm là thêm background-clip: text đến phần tử và transition các background-position. Không cần phải phức tạp hơn thế!

Nhưng chúng ta có thể làm tốt hơn nếu chúng ta kết hợp nhiều gradient với các giá trị cắt nền khác nhau.

Trong ví dụ đó, tôi sử dụng hai gradient khác nhau và hai giá trị với background-clip. Gradient nền đầu tiên được cắt vào văn bản (nhờ text giá trị) để đặt màu khi di chuột, trong khi gradient nền thứ hai tạo ra đường gạch dưới dưới cùng (nhờ padding-box giá trị). Mọi thứ khác được sao chép thẳng lên từ công việc chúng tôi đã làm trong bài viết đầu tiên của loạt bài này.

Còn về hiệu ứng di chuột trong đó thanh trượt từ trên xuống dưới theo cách trông giống như văn bản được quét, sau đó được tô màu:

Lần này tôi đã thay đổi kích thước của gradient đầu tiên để tạo đường thẳng. Sau đó, tôi trượt nó với gradient khác cập nhật màu văn bản để tạo ảo giác! Bạn có thể hình dung những gì đang xảy ra trong bút này:

Chúng tôi chỉ mới làm nổi lên bề mặt của những gì chúng tôi có thể làm với background-clipquyền hạn ping! Tuy nhiên, kỹ thuật này có thể là thứ bạn muốn tránh sử dụng trong quá trình sản xuất, vì Firefox được biết là có rất nhiều lỗi được báo cáo co quan hệ vơi background-clip. Safari cũng có các vấn đề hỗ trợ. Điều đó chỉ khiến Chrome có sự hỗ trợ vững chắc cho nội dung này, vì vậy có thể mở nó khi chúng ta tiếp tục.

Hãy chuyển sang một hiệu ứng di chuột khác bằng cách sử dụng background-clip:

Có thể bạn đang nghĩ cái này trông siêu dễ so với những gì chúng tôi vừa đề cập - và bạn nói đúng, không có gì lạ mắt ở đây cả. Tất cả những gì tôi đang làm là trượt một gradient trong khi tăng kích thước của một gradient khác.

Nhưng chúng ta ở đây để xem xét các hiệu ứng di chuột nâng cao, phải không? Hãy thay đổi nó một chút để hoạt ảnh khác khi con trỏ chuột rời khỏi phần tử. Cùng một hiệu ứng di chuột, nhưng một kết thúc khác cho hoạt ảnh:

Tuyệt vời phải không? chúng ta hãy mổ xẻ đoạn mã:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Chúng tôi có ba lớp nền - hai gradient và background-color được xác định bằng cách sử dụng --_c biến ban đầu được đặt thành trong suốt (#0000). Khi di chuột, chúng tôi thay đổi màu thành màu trắng và --_c biến thành màu chính (--c).

Đây là những gì đang xảy ra trên đó transition: Đầu tiên, chúng tôi áp dụng quá trình chuyển đổi cho mọi thứ nhưng chúng tôi trì hoãn color và background-color by 0.5s để tạo hiệu ứng trượt. Ngay sau đó, chúng tôi thay đổi color và background-color. Bạn có thể nhận thấy không có thay đổi trực quan nào vì văn bản đã có màu trắng (nhờ gradient đầu tiên) và nền đã được đặt thành màu chính (nhờ gradient thứ hai).

Sau đó, khi di chuột ra ngoài, chúng tôi áp dụng thay đổi tức thì cho mọi thứ (lưu ý 0s trì hoãn), ngoại trừ color và background-color có sự chuyển đổi. Điều này có nghĩa là chúng tôi đặt tất cả các gradient trở lại trạng thái ban đầu của chúng. Một lần nữa, bạn có thể sẽ không thấy thay đổi trực quan vì văn bản color và background-color đã được thay đổi khi di chuột.

Cuối cùng, chúng tôi áp dụng sự mờ dần cho màu sắc và background-color để tạo phần di chuột ra của hoạt ảnh. Tôi biết, có thể khó nắm bắt nhưng bạn có thể hình dung rõ hơn thủ thuật này bằng cách sử dụng các màu sắc khác nhau:

Di chuột ở trên nhiều lần và bạn sẽ thấy các thuộc tính hoạt động khi di chuột và các thuộc tính hoạt động khi di chuột ra ngoài. Sau đó, bạn có thể hiểu cách chúng tôi tiếp cận hai hoạt ảnh khác nhau cho cùng một hiệu ứng di chuột.

Chúng ta đừng quên kỹ thuật chuyển mạch KHÔ mà chúng tôi đã sử dụng trong các bài viết trước của loạt bài này để giúp giảm lượng mã bằng cách chỉ sử dụng một biến cho công tắc:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Nếu bạn đang thắc mắc tại sao tôi lại tìm cú pháp RGB cho màu chính, thì đó là vì tôi cần thử nghiệm với độ trong suốt alpha. Tôi cũng đang sử dụng biến --_t để giảm một phép tính dư thừa được sử dụng trong transition bất động sản.

Trước khi chúng ta chuyển sang phần tiếp theo, đây là các ví dụ khác về hiệu ứng di chuột mà tôi đã làm cách đây một thời gian dựa vào background-clip. Sẽ là quá dài để trình bày chi tiết từng cái một nhưng với những gì chúng tôi đã học được cho đến nay, bạn có thể dễ dàng hiểu mã. Có thể là một nguồn cảm hứng tốt để thử một vài trong số chúng một mình mà không cần xem mã.

Tôi biết rồi mà. Đây là những hiệu ứng di chuột điên rồ và không phổ biến và tôi nhận ra rằng chúng quá nhiều trong hầu hết các tình huống. Nhưng đây là cách thực hành và học CSS. Hãy nhớ rằng, chúng tôi đẩy các giới hạn hiệu ứng di chuột qua CSS. Hiệu ứng di chuột có thể là một điều mới lạ, nhưng chúng tôi đang học các kỹ thuật mới theo cách chắc chắn có thể được sử dụng cho những thứ khác.

Hiệu ứng di chuột bằng CSS mask

Đoán xem nào? CSS mask thuộc tính sử dụng gradient giống như cách background sở hữu, vì vậy bạn sẽ thấy rằng những gì chúng tôi thực hiện tiếp theo là khá đơn giản.

Hãy bắt đầu bằng cách xây dựng một gạch dưới ưa thích.

Tôi đang sử dụng background để tạo đường viền dưới cùng zig-zag trong bản trình diễn đó. Nếu tôi muốn áp dụng hoạt ảnh cho phần gạch dưới đó, sẽ thật tẻ nhạt nếu chỉ sử dụng các thuộc tính nền.

Nhập CSS mask.

Mã có thể trông lạ nhưng logic vẫn giống như chúng ta đã làm với tất cả các hoạt ảnh nền trước đó. Các mask được bao gồm hai gradient. Gradient đầu tiên được xác định với một màu mờ đục bao phủ khu vực nội dung (nhờ content-box giá trị). Gradient đầu tiên đó làm cho văn bản có thể nhìn thấy và ẩn đường viền zig-zag phía dưới. content-box là mask-clip giá trị hoạt động giống như background-clip

linear-gradient(#000 0 0) content-box

Gradient thứ hai sẽ bao phủ toàn bộ khu vực (nhờ padding-box). Cái này có chiều rộng được xác định bằng cách sử dụng --_p và nó sẽ được đặt ở bên trái của phần tử.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Bây giờ, tất cả những gì chúng ta phải làm là thay đổi giá trị của --_p khi di chuột để tạo hiệu ứng trượt cho gradient thứ hai và hiển thị đường gạch dưới.

.hover:hover { --_p: 100%; color: var(--c);
}

Bản demo sau sử dụng các lớp mặt nạ làm nền để thấy rõ hơn thủ thuật đang diễn ra. Hãy tưởng tượng rằng phần màu xanh lá cây và màu đỏ là phần có thể nhìn thấy của phần tử trong khi mọi thứ khác là trong suốt. Đó là những gì mặt nạ sẽ làm nếu chúng ta sử dụng cùng một màu với nó.

Với thủ thuật như vậy, chúng ta có thể dễ dàng tạo ra nhiều biến thể bằng cách sử dụng cấu hình gradient khác với mask bất động sản:

Mỗi ví dụ trong bản trình diễn đó sử dụng một cấu hình gradient hơi khác nhau cho mask. Lưu ý, sự tách biệt trong mã giữa cấu hình nền và cấu hình mặt nạ. Chúng có thể được quản lý và duy trì một cách độc lập.

Thay vào đó, hãy thay đổi cấu hình nền bằng cách thay thế gạch chân zig-zag bằng một gạch dưới lượn sóng:

Một bộ sưu tập các hiệu ứng di chuột khác! Tôi giữ tất cả các cấu hình mặt nạ và thay đổi nền để tạo ra một hình dạng khác. Bây giờ, bạn có thể hiểu làm thế nào tôi có thể để đạt được 400 hiệu ứng di chuột không có phần tử giả - và chúng ta vẫn có thể có nhiều hơn thế!

Giống như, tại sao không phải là một cái gì đó như thế này:

Đây là một thách thức dành cho bạn: Đường viền trong bản trình diễn cuối cùng đó là một gradient bằng cách sử dụng mask tài sản để tiết lộ nó. Bạn có thể tìm ra logic đằng sau hình ảnh động không? Thoạt nhìn nó có vẻ phức tạp, nhưng nó siêu giống với logic mà chúng ta đã xem xét đối với hầu hết các hiệu ứng di chuột khác dựa trên gradient. Đăng giải thích của bạn trong các ý kiến!

Hiệu ứng di chuột trong 3D

Bạn có thể nghĩ rằng không thể tạo hiệu ứng 3D với một phần tử duy nhất (và không cần dùng đến phần tử giả!) Nhưng CSS có một cách để biến điều đó thành hiện thực.

Những gì bạn đang thấy không phải là hiệu ứng 3D thực mà là một ảo ảnh 3D hoàn hảo trong không gian 2D kết hợp CSS background, clip-pathvà transform tài sản.

Điều đầu tiên chúng tôi làm là xác định các biến của chúng tôi:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Sau đó, chúng tôi tạo một đường viền trong suốt với độ rộng sử dụng các biến trên:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Cả hai bên trên và bên phải của phần tử cần phải bằng --b giá trị trong khi cạnh dưới và cạnh trái cần bằng tổng của --b và --d (đó là --_s Biến đổi).

Đối với phần thứ hai của thủ thuật, chúng ta cần xác định một gradient bao phủ tất cả các vùng biên giới mà chúng ta đã xác định trước đó. Một conic-gradient sẽ hoạt động cho điều đó:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Chúng tôi thêm một gradient khác cho phần thứ ba của thủ thuật. Cái này sẽ sử dụng hai giá trị màu trắng bán trong suốt chồng lên màu gradient trước đó đầu tiên để tạo ra các sắc thái khác nhau của màu chính, cho chúng ta ảo giác về bóng và chiều sâu.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Bước cuối cùng là áp dụng CSS clip-path để cắt các góc cho cảm giác bóng dài như sau:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Đó là tất cả! Chúng tôi vừa tạo một hình chữ nhật 3D không có gì ngoài hai gradient và một clip-path mà chúng ta có thể dễ dàng điều chỉnh bằng cách sử dụng các biến CSS. Bây giờ, tất cả những gì chúng ta phải làm là tạo hiệu ứng cho nó!

Lưu ý các tọa độ từ hình trước (được biểu thị bằng màu đỏ). Hãy cập nhật những thứ đó để tạo hoạt ảnh:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Bí quyết là ẩn phần dưới cùng và bên trái của phần tử để tất cả những gì còn lại là một phần tử hình chữ nhật không có chiều sâu.

Bút này cô lập clip-path một phần của hoạt ảnh để xem nó đang làm gì:

Thao tác cuối cùng là di chuyển phần tử theo hướng ngược lại bằng cách sử dụng translate - và ảo tưởng là hoàn hảo! Đây là hiệu ứng khi sử dụng các giá trị thuộc tính tùy chỉnh khác nhau cho các độ sâu khác nhau:

Hiệu ứng di chuột thứ hai cũng theo cấu trúc tương tự. Tất cả những gì tôi đã làm là cập nhật một vài giá trị để tạo chuyển động trên cùng bên trái thay vì chuyển động trên cùng bên phải.

Kết hợp các hiệu ứng!

Điều tuyệt vời về mọi thứ chúng tôi đã đề cập là tất cả chúng đều bổ sung cho nhau. Đây là một ví dụ mà tôi đang thêm các text-shadow hiệu ứng từ bài báo thứ hai trong loạt phim background kỹ thuật hoạt hình từ bài báo đầu tiên trong khi sử dụng thủ thuật 3D mà chúng tôi vừa đề cập:

Ban đầu, đoạn mã thực sự có thể khó hiểu, nhưng hãy tiếp tục và mổ xẻ nó thêm một chút - bạn sẽ nhận thấy rằng nó chỉ đơn thuần là sự kết hợp của ba hiệu ứng khác nhau đó, khá giống nhau.

Hãy để tôi kết thúc bài viết này với hiệu ứng di chuột cuối cùng trong đó tôi kết hợp nền, đường dẫn clip và một dấu gạch ngang perspective để mô phỏng một hiệu ứng 3D khác:

Tôi đã áp dụng hiệu ứng tương tự cho hình ảnh và kết quả là khá tốt để mô phỏng 3D với một phần tử duy nhất:

Muốn xem kỹ hơn cách hoạt động của bản demo cuối cùng đó? Tôi đã viết một cái gì đó lên trên đó.

Kết thúc

Oof, chúng tôi đã hoàn thành! Tôi biết, đó là rất nhiều CSS phức tạp nhưng (1) chúng tôi đang ở trên trang web phù hợp cho loại thứ đó và (2) mục tiêu là nâng cao hiểu biết của chúng tôi về các thuộc tính CSS khác nhau lên cấp độ mới bằng cách cho phép chúng tương tác với nhau.

Bạn có thể hỏi bước tiếp theo là gì kể từ đây khi chúng tôi kết thúc loạt bài nhỏ về hiệu ứng di chuột CSS nâng cao này. Tôi muốn nói rằng bước tiếp theo là sử dụng tất cả những gì chúng tôi đã học và áp dụng chúng cho các phần tử khác, như nút, mục menu, liên kết, v.v. Chúng tôi giữ mọi thứ khá đơn giản miễn là giới hạn các thủ thuật của chúng tôi trong một phần tử tiêu đề vì lý do chính xác đó ; yếu tố thực tế không quan trọng. Hãy nắm bắt các khái niệm và chạy với chúng để tạo, thử nghiệm và học hỏi những điều mới!

---

Hiệu ứng di chuột CSS thú vị sử dụng cắt nền, mặt nạ và 3D ban đầu được xuất bản trên CSS-Thủ thuật. Bạn nên nhận bản tin.

• Coinsmart. Sàn giao dịch Bitcoin và tiền điện tử tốt nhất Châu Âu.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. TRUY CẬP MIỄN PHÍ.
• CryptoHawk. Radar Altcoin. Dùng thử miễn phí.
• Nguồn: https://css-tricks.com/css-hover-effects-background-masks-3d/