Di chuột thu phóng CSS
Trong đoạn mã này, chúng ta sẽ tìm hiểu cách phóng to/thu nhỏ một phần tử, đặc biệt là hình ảnh và hình nền khi di chuột bằng CSS thuần túy. Loại hiệu ứng này được sử dụng nổi bật trong các phòng trưng bày, bán sản phẩm và các trường hợp kiểu danh mục đầu tư trong đó thiết kế có mục đích hiển thị cả chi tiết hình ảnh và thông tin Show Để có hiệu ứng thu phóng, bạn cần sử dụng thuộc tính biến đổi CSS với số lượng tỷ lệ ưa thích của mình. Nó cho phép quản lý việc phóng to hình ảnh. Hoạt ảnh CSS được hưởng lợi từ khả năng tăng tốc phần cứng và do đó, có vẻ phẳng hơn so với các cách hoạt ảnh khác Bạn có thể sử dụng các phần tử giả như. trước để thêm lớp phủ màu. Sau đó, phần tử con sẽ hiển thị lớp phủ màu khi bạn di chuột vào phần tử cha. Và cuối cùng, chúng tôi sẽ giới thiệu cách thêm văn bản vào lớp phủ của chúng tôi. Nó có thể được thực hiện bằng cách đặt văn bản trong thẻ hoặc làm cho nó chỉ hiển thị khi được di chuột Ví dụ về thêm hiệu ứng phóng to khi di chuột bằng văn bản
Rê chuột vào các hình để xem hiệu ứng Kích thước được đề xuất là biến đổi. tỷ lệ (1. 5), tạo hiệu ứng thu phóng 150%. Nếu thu phóng quá lớn, nó sẽ nằm ngoài chế độ xem Xem một ví dụ khác trong đó Có nhiều cách bạn có thể thêm hiệu ứng đặc biệt vào trang web của mình và một trong số đó là thêm Hiệu ứng thu phóng trên Hình ảnh khi người dùng di chuột qua chúng. Bạn tạo hiệu ứng zoom ảnh bằng css3 transitions. Điều đó có nghĩa là bạn có thể Phát triển Hình ảnh hoặc Thu nhỏ và Hình ảnh khi di chuột có thể được tạo bằng cách sử dụng chuyển đổi tỷ lệ CSS3 chuyển tiếp CSSChuyển đổi CSS, là một phần của bộ thông số kỹ thuật CSS3, cung cấp cách kiểm soát tốc độ hoạt ảnh khi thay đổi thuộc tính CSS Thí dụĐoạn mã trên cho thấy div sẽ mất 2 giây khi di chuột qua nó để chuyển màu đường viền Đỏ sang Xanh lục Tăng và thu nhỏ hình ảnh CSSTừ các ví dụ sau, bạn có thể tìm hiểu cách Phát triển và Thu nhỏ hình ảnh với sự trợ giúp của quá trình chuyển đổi CSS Sau khi đọc bài viết này, bạn sẽ học cách làm cho hình ảnh thu phóng mượt mà khi bạn di chuột. Và không chỉ tăng kích thước mà còn tạo hiệu ứng thu phóng Chúng tôi sẽ chỉ sử dụng HTML và CSS. Chúng tôi sẽ không cần bất kỳ JavaScript nào Vì vậy, hãy viết một số mã html. Chúng tôi sẽ đặt hình ảnh của chúng tôi img trong một khối với ảnh của lớp
Tiếp theo, hãy chuyển sang css. Với pseudo class hover chúng ta sẽ có thể thay đổi giá trị của các thuộc tính Trong trường hợp này, chúng tôi sẽ phóng to hình ảnh bằng cách thay đổi thuộc tính biến đổi của nó. Hãy viết nó trong mã
Ở đây chúng tôi có lời giải thích sau. khi bạn di chuột vào một khối chứa ảnh (ảnh lớp) thì ta thay đổi giá trị biến đổi của chính ảnh đó (img) Giá trị Tỷ lệ là mức độ chúng tôi chia tỷ lệ hình ảnh. Giá trị mặc định là 1 Để thêm một chút mượt mà cho quá trình chuyển đổi, hãy thêm thuộc tính chuyển đổi cho thẻ img
Ở đây, chúng tôi đã chỉ định thuộc tính nào chúng tôi sẽ thay đổi và quá trình chuyển đổi sẽ kéo dài bao lâu Bây giờ hình ảnh đang phóng to mượt mà, nhưng nó nằm ngoài khung điều kiện của nó. Để khắc phục điều này chúng ta cần thêm thuộc tính tràn vào khối ảnh với giá trị ẩn
Nó giống như chúng ta đang nói. mọi thứ vượt ra ngoài khối này, chúng tôi ẩn Nhưng đó không phải là tất cả, vì trình duyệt không biết kích thước khối của chúng tôi – vì vậy chúng tôi cần đặt nó. Và đối với hình ảnh, chúng ta phải đảm bảo rằng nó chiếm toàn bộ chiều rộng và chiều cao của khối ảnh Bạn kết thúc với một mã như thế này
Ví dụ về công việc Xem Pen Cách thu phóng mượt mà hình ảnh khi di chuột – hiệu ứng trên CSS thuần túy của Pelegrin (@pelegrin2puk) trên CodePen Tôi hy vọng bạn đã hiểu nguyên tắc để bạn có thể thu phóng hình ảnh mượt mà khi di chuột. Tôi sẽ đính kèm video của chúng tôi, nơi tôi một lần nữa giải thích chi tiết mọi thứ |