10 thư viện CSS cho hiệu ứng di chuột hình ảnh tốt hơn
Cho phép người dùng dễ dàng và biết rõ phần nào của trang web có thể nhấp là một phần quan trọng của thiết kế UX. Cách làm cũ nhưng vàng là thay đổi màu văn bản và gạch chân nó. Ngày nay, với CSS, có rất nhiều cách để cung cấp hiệu ứng di chuột, đặc biệt là hình ảnh.
Các nhà phát triển có thể bây giờ thêm hiệu ứng chuyển tiếp hoặc hình ảnh động khi một sự kiện di chuột được kích hoạt. Chúng tôi đang xem xét các slide định hướng, phóng to ở các tốc độ khác nhau, mờ dần và mờ dần, hiệu ứng bản lề, hiển thị đèn chiếu, lắc lư, nảy và hơn thế nữa.
Trong phần tổng hợp này, có hơn 250 hiệu ứng di chuột để truyền cảm hứng cho bạn. Bạn cũng có thể lấy mã tại nguồn.
Hiệu ứng di chuột hình ảnh (16 hiệu ứng)
Trong trang này, bạn sẽ tìm thấy một bộ sưu tập 16 hiệu ứng hình ảnh di chuột với chú thích. Lấy mã HTML và CSS cho mỗi hiệu ứng bằng cách di chuột qua các hình ảnh, sau đó nhấp vào Mã hiển thị.
Chú thích hình ảnh động (4 hiệu ứng)
Dưới đây là 4 hình động chú thích thú vị chạy khi một người lướt qua hình ảnh. Các hiệu ứng được xây dựng với các chuyển đổi và chuyển đổi CSS3 thuần túy và không có JavaScript để tăng khả năng tương thích trên trình duyệt.
iover (35 hiệu ứng)
iHover là một tập hợp các hiệu ứng di chuột được cung cấp bởi CSS3. Có 20 hiệu ứng di chuột vòng tròn và 15 hiệu ứng di chuột vuông. Để sử dụng các hiệu ứng, bạn sẽ cần phải viết một số đánh dấu HTML và bao gồm các tệp CSS.
Di chuột hình ảnh (44 hiệu ứng)
Thư viện này chứa 44 hiệu ứng được tạo bằng CSS thuần túy. Một số hiệu ứng bao gồm mờ dần, đẩy, trượt, bản lề, tiết lộ, phóng to, làm mờ, lật, nếp gấp và cửa chớp, theo nhiều hướng. Có một phiên bản mở rộng gồm 216 hiệu ứng có thể được mua với giá € 14.
Ý tưởng hiệu ứng di chuột (30 hiệu ứng)
Bản demo di chuột hình ảnh này được thực hiện bởi Codrop, mang đến cho bạn nguồn cảm hứng khi thực hiện chuyển tiếp mượt mà giữa hình ảnh và chú thích của nó. Có tổng số 30 hiệu ứng trên hai bộ với hướng dẫn và mã nguồn.
Di chuột CSS (108 hiệu ứng)
Hover CSS cho phép bạn thêm hiệu ứng di chuột vào bất kỳ yếu tố nào, chẳng hạn như nút, liên kết hoặc hình ảnh. Các hiệu ứng bao gồm chuyển tiếp 2D, chuyển tiếp nền, đường viền, chuyển tiếp Shadow và Glow, v.v. Thư viện có sẵn trong CSS, Sass và LESS.
Hoạt hình (Hơn 100 hiệu ứng)
Có hơn 100 hình động di chuột hình ảnh đến các nút, lớp phủ, chi tiết, chú thích, hình ảnh và các nút phương tiện truyền thông xã hội. Tất cả các hiệu ứng được cung cấp bởi CSS3.
Hiệu ứng di chuột (7 hiệu ứng)
Có 7 hiệu ứng khác nhau trong bộ sưu tập này. Tất cả các chuyển đổi trông thực sự tốt đẹp và mịn màng. Đến phần hướng dẫn để tìm hiểu cách áp dụng các hiệu ứng này cho dự án của bạn.
Hiệu ứng di chuột hình ảnh CSS (15 hiệu ứng)
Một tập hợp các hiệu ứng di chuột đơn giản như phóng to, trượt, xoay, thang màu xám, mờ, mờ và các hiệu ứng cơ bản khác. Bạn có thể sử dụng các hiệu ứng này bằng cách thêm lớp CSS trước nhân vật nhãn.
Hiệu ứng di chuột 3D nhận biết hướng
Đây là một hiệu ứng di chuột siêu tuyệt vời sẽ phát hiện chuyển động chuột cuối cùng của bạn. Chú thích hình ảnh sẽ mở từ một trong bốn hướng dựa trên vị trí con trỏ cuối cùng của bạn.
Hoạt hình di chuột
Đây là một hoạt hình di chuột biên giới lấy cảm hứng từ UNIQLO. Khi có sự kiện di chuột, đường viền của hình ảnh sẽ trở thành hoạt hình.
Gạch với hoạt hình Hover
Một cho thiết kế gạch, cái này có tính năng thu phóng chậm, trang trình bày, cửa sổ bật lên, lớp phủ mờ.
Hiệu ứng di chuyển clip của SVG
Hiệu ứng di chuột hình ảnh tia X siêu tuyệt vời được cung cấp bởi SVG đường dẫn clip và chuyển tiếp CSS. Hoạt động tốt trên Chrome, Opera và Safari.
