Cách phóng to / thu nhỏ các phần tử khi di chuột bằng CSS

Tìm hiểu cách làm cho các phần tử phóng to / thu nhỏ khi di chuột bằng CSS thuần túy bằng cách sử dụng transform phương pháp chuyển đổi của thuộc tính:scale() .

Thu phóng / Tăng tỷ lệ khi di chuột

Thử di chuột qua ô này:

Nó tăng lên chính xác 1,5 lần so với kích thước ban đầu - vì vậy nó sẽ lớn hơn 50% khi bạn di chuột qua (di chuột qua) nó.

CSS transform phương pháp tỷ lệ của thuộc tính có thể tăng hoặc giảm kích thước của các phần tử. Nó hoạt động ở cả 3D và 2D. Trong ví dụ đơn giản này, chúng tôi sử dụng 2D.

Để tạo lại ví dụ trên, chúng ta cần 1 phần tử HTML và 2 bộ quy tắc CSS.

HTML

Đầu tiên, hãy tạo phần tử HTML của bạn với một lớp có tên là zoom-box :

<div class="zoom-box"></div>

CSS

Sau đó, thêm CSS này vào biểu định kiểu của bạn:

.zoom-box {
  background-color:#CF4B32;
  width: 100px;
  height: 100px;
  margin: 32px auto;
  transition: transform .2s; /* Animation */
}

.zoom-box:hover {
  transform: scale(1.5);
}

Đó là nó!

Cách hoạt động của mã

Đầu tiên, chúng tôi tạo một phần tử div HTML có thuộc tính lớp được gọi là zoom-box .
Sau đó, chúng tôi tạo hai bộ quy tắc cho lớp hộp thu phóng, một bộ cho trạng thái mặc định tĩnh, .zoom-box và một cho trạng thái di chuột động, .zoom-box:hover .
Bộ quy tắc đầu tiên nhận một số thuộc tính mỹ phẩm / kích thước (height, width, color ). margin thuộc tính chỉ để căn giữa hộp (tùy chọn).
Phần quan trọng của .zoom-box lớp là transition thuộc tính có giá trị của transform và thời lượng .2s (200 mili giây).
Trong bộ quy tắc thứ hai .zoom-box:hover chúng tôi thêm transform thuộc tính, với scale() phương thức như một giá trị. Nó nhận một tham số 1.5 là những gì quyết định phần tử hộp sẽ tăng tỷ lệ bao nhiêu khi di chuột. 1,5 giống như nói 150% kích thước ban đầu.

Khả năng tương thích của trình duyệt

Đây là mã từ hướng dẫn này với các tiền tố của nhà cung cấp trình duyệt được bổ sung, vì vậy nó hoạt động trên tất cả các trình duyệt chính, Chrome, Firefox, Safari, Opera:

.zoom-box {
	background-color: #cf4b32;
	width: 100px;
	height: 100px;
	margin: 32px auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s; /* Animation */
}

.zoom-box:hover {
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

Điều cần biết

Lưu ý rằng phần tử hộp tăng và giảm với cùng thời lượng / thời gian chuyển đổi, mặc dù chúng tôi chỉ thêm transition thuộc tính của .zoom-box lớp.

Điều này xảy ra vì khi transition thuộc tính được thêm vào bộ chọn lớp ban đầu (.zoom-box ), các giá trị của nó được tự động thêm vào mọi bộ chọn bổ sung được gắn vào lớp, trong trường hợp này, đó là :hover (còn được gọi là lớp giả )

Nếu bạn chỉ thêm transition thuộc tính của :hover (pseudo) lớp bộ chọn, sau đó nó chỉ làm hoạt hình phần tăng tỷ lệ - không giảm tỷ lệ. Ngay sau khi bạn di chuyển ra ngoài phần tử hộp, nó đột ngột giảm tỷ lệ với thời lượng bằng 0 (0 giây) - điều mà bạn hiếm khi muốn, vì nó rất khắc nghiệt đối với mắt.

Nếu bạn muốn sử dụng các loại hoạt ảnh và thời lượng khác nhau trên các trạng thái khác nhau của phần tử của mình (lên / xuống), bạn chỉ cần thêm transition thuộc tính của :hover bộ chọn lớp giả và cung cấp cho nó các giá trị khác nhau.