Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Cách làm Elements Zoom/Scale up khi Hover với CSS

Tìm hiểu cách làm elements zoom/scale-up khi hover với pure CSS bằng property transform method: scale().

Zoom/Scale-Up khi hover

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

Nó scale up đúng 1.5 lần size gốc — to lên 50% khi bạn di chuột qua (hover).

CSS property transform method scale có thể tăng hoặc giảm size elements. Hoạt động cả 3D và 2D. Ví dụ đơn giản này dùng 2D.

Để tái tạo ví dụ trên, cần 1 HTML element và 2 CSS rule-sets.

HTML

Tạo HTML element với class zoom-box:

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

CSS

Thêm CSS này vào stylesheet:

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

Xong!

Cách code hoạt động

  • Đầu tiên, tạo HTML div element với class attribute zoom-box.
  • Sau đó tạo hai rule-sets cho zoom box class: một cho static default state, .zoom-box và một cho dynamic hover state, .zoom-box:hover.
  • Rule-set đầu có cosmetic/size properties (height, width, color). Property margin chỉ để center align box (tùy chọn).
  • Phần quan trọng của class .zoom-box là property transition với giá trị transform và duration .2s (200 milliseconds).
  • Rule-set thứ hai .zoom-box:hover thêm property transform, với method scale() làm giá trị. Nó nhận parameter 1.5 quy định box element scale up bao nhiêu khi hover. 1.5 như nói 150% size gốc.

Tương thích trình duyệt

Code từ tutorial này với vendor prefixes, hoạt động trên mainstream browsers 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 tốt để biết

Chú ý box element scale up và down với cùng transition duration/timing, dù chúng ta chỉ thêm transition property vào class .zoom-box.

Điều này xảy ra vì khi transition property thêm vào original class selector (.zoom-box), giá trị của nó tự động thêm vào mọi selector additional gắn với class, במקרה này là :hover (cũng gọi là pseudo-class)

Nếu bạn chỉ thêm transition property vào selector :hover (pseudo), thì nó chỉ animate phần scale-up — không scale down. Ngay khi bạn di chuột ra khỏi box element, nó scale down đột ngột với zero (0s) duration — hiếm khi bạn muốn, vì nó harsh trên mắt.

Nếu muốn animation type và duration khác nhau cho các state khác nhau của element (up/down), chỉ cần thêm transition property vào pseudo-class selector :hover, cho giá trị khác nhau.