Thu phóng / Tăng tỷ lệ khi di chuột Thử di chuột qua hộp 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ó trở nên lớn hơn 50%…

Bạn đang xem: css tăng kích thước khi di chuột

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

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

Thử di chuột qua hộp này:

Kích thước của 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ó.

Phương thức tỷ lệ của thuộc tính CSS biến đổi 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 tôi 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 :

  

& lt; < / p> div

class

=

"

zoom-box

"

& gt;

& lt; /

div

& gt;

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

;

chuyển đổi

:

biến đổi .2s

;

}

. zoom-box: hover

{

biến đổi

:

quy mô

(

1.5

)

;

}

Vậy là xong!

Cách mã hoạt động

  • Đầu tiên, chúng tôi tạo phần tử div HTML với thuộc tính lớp có tên 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 bộ cho trạng thái di chuột động, < code class = "language-text">. 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 ). Thuộc tính margin chỉ để căn giữa hộp (tùy chọn).
  • Phần quan trọng của lớp . zoom-box là thuộc tính transfer với giá trị là < code class = "language-text"> biến đổi và thời lượng . 2 giây (200 mili giây).
  • Trong thuộc tính rule-set thứ hai . zoom-box: hover , chúng tôi thêm thuộc tính biến đổi , với phương thức scale () dưới dạng một giá trị. Nó nhận một tham số 1.5 . Đây là tham số cho biết 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-chuyển đổi

:

-webkit-biến đổi 0,2 giây

;

chuyển đổi

:

-webkit-biến đổi 0,2s

;

chuyển đổi

:

biến đổi 0,2s

;

chuyển đổi

:

biến đổi 0,2s

,

-webkit-biến đổi 0,2 s

;

}

. zoom-box: hover

{

- webkit-biến đổi

:

quy mô

(

1.5

)

;

biến đổi

:

quy mô

(

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 thuộc tính chuyển đổi vào ngôn ngữ . zoom-box lớp.

Điều này xảy ra vì khi thuộc tính transfer đượ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 đính kèm vào lớp, trong trường hợp này, đó là : hover (còn được gọi là pseudo-class )

Nếu bạn chỉ thêm thuộc tính transfer vào lớp bộ chọn : hover (pseudo), thì chỉ tạo hiệu ứng cho 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 (0s) – đ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 thuộc tính chuyển đổi vào : hover công cụ chọn lớp giả và cung cấp cho nó các giá trị khác nhau.


Xem thêm những thông tin liên quan đến chủ đề css tăng kích thước khi di chuột

CSS dimensions – Kích thước chiều rộng và chiều cao của phần tử trong CSS

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-08-17
  • Đánh giá: 4 ⭐ ( 7017 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu thuộc tính CSS cho phép tùy chỉnh kích thước chiều rộng và chiều cao của phần tử trong CSS: width, min-width, max-width, height, min-height, max-height.
    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
    BIDV: 21510002210466
    Vietcombank: 0451000308735
    hoặc qua ví điện tử momo, zalopay, shoppeepay: https://bit.ly/ViDienTu

    html css nguyenthithuylien

Thực hành CSS với một Form Tìm kiếm

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 4 ⭐ ( 6257 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, chúng ta sẽ khám phá cách trang trí một form tìm kiếm đơn giản. Chúng ta sẽ không làm bất cứ điều gì cao siêu cả, thay vào đó khám phá bốn cách khác nhau để có thể trang…

Bài 7: Hiệu ứng hover bằng css và làm bài tập

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 1029 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, mình sẽ hướng dẫn hiệu ứng hover bằng css cho các thẻ HTML. Ví dụ đơn giản trong bài là tiêu đề của bài viết đổi màu khi trỏ chuột vào.

Tổng hợp các thuộc tính của CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 3013 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp và phân loại tất cả các thuộc tính của CSS theo các nhóm Color, Background và Borders, Box, Text, Fonts, Table, Animation, Transform, Transition, v.v.

Thuộc tính Text trong CSS, chiều cao, kích cỡ và màu sắc chữ CSS

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 7301 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: thuoc tinh text trong css, Thuộc tính Text trong CSS, chiều cao, kích cỡ và màu sắc chữ CSS

Cách sử dụng đường viền (border) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 3483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Kích cỡ trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 4104 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kích cỡ trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  LIKE (Transact-SQL) - Máy chủ SQL - như truy vấn trong sql

By ads_php