CSS - Phóng to: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư CSS tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của CSS zoom. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể phóng to qua các trang web như một chuyên gia!

CSS Zoom là gì?

Trước khi bắt đầu, hãy hiểu về CSS zoom là gì. Hãy tưởng tượng bạn có một kính lúp có thể làm lớn hoặc nhỏ các thứ trên trang web. Đó chính là điều mà thuộc tính CSS zoom làm! Nó cho phép bạn放大 hoặc缩小 các yếu tố, ảnh hưởng đến kích thước và vị trí của chúng.

Các giá trị có thể sử dụng

Hãy cùng nhìn qua các giá trị khác nhau mà chúng ta có thể sử dụng với thuộc tính zoom:

Giá trị	Mô tả
normal	Giá trị mặc định, không phóng to
<phần trăm>	Mức phóng to dưới dạng phần trăm (ví dụ: 150%)
<số>	Mức phóng to dưới dạng số (ví dụ: 1.5)

Bây giờ, hãy khám phá chi tiết từng giá trị này!

Áp dụng cho

Trước khi nhảy vào mã, điều quan trọng là phải biết chúng ta có thể sử dụng thuộc tính zoom ở đâu. Nó có thể được áp dụng cho tất cả các yếu tố, bao gồm cả các phần tử giả ::before và ::after. Điều này có nghĩa là bạn có thể phóng to gần như bất kỳ thứ gì trên trang web của bạn!

Cú pháp DOM

Để sử dụng thuộc tính zoom trong CSS, bạn cần biết cú pháp cơ bản. Đó là:

element {
    zoom: value;
}

Đơn giản phải không? Bây giờ, hãy xem một số ví dụ cụ thể!

CSS zoom - Giá trị 'normal'

Giá trị 'normal' giống như nói với trang web của bạn, "Hey, chỉ cần là chính mình!" Đây là trạng thái mặc định không có phóng to.

.my-element {
    zoom: normal;
}

Trong ví dụ này, .my-element sẽ xuất hiện ở kích thước gốc. Đó giống như khi tôi bảo học sinh của mình "chỉ cần là chính mình" vào ngày đầu tiên của lớp - không cần phải cố gắng trông lớn hơn hoặc nhỏ hơn!

CSS zoom - Giá trị <phần trăm>

Bây giờ, hãy làm cho mọi thứ thú vị hơn! Chúng ta có thể sử dụng phần trăm để phóng to hoặc thu nhỏ.

.zoom-in {
    zoom: 150%;
}

.zoom-out {
    zoom: 50%;
}

Ở đây, .zoom-in sẽ làm lớn yếu tố gấp 1.5 lần, trong khi .zoom-out sẽ thu nhỏ nó xuống một nửa kích thước ban đầu. Đó giống như khi tôi vô tình để kích thước chữ trên điện thoại của mình là 200% - đột nhiên, mọi thứ đều lớn!

Hãy nhìn nó trong hành động:

<div class="zoom-in">Tôi bị phóng to!</div>
<div class="zoom-out">Tôi bị thu nhỏ!</div>

Yếu tố đầu tiên sẽ xuất hiện lớn hơn, trong khi yếu tố thứ hai sẽ nhỏ hơn. Hãy thử nó và xem sự khác biệt!

CSS zoom - Với giá trị số

Sử dụng số là một cách khác để kiểm soát phóng to. Nó hoạt động tương tự như phần trăm, nhưng không có符号%.

.big-zoom {
    zoom: 2;
}

.small-zoom {
    zoom: 0.5;
}

Trong trường hợp này, .big-zoom gấp đôi kích thước của yếu tố, trong khi .small-zoom thu nhỏ nó xuống một nửa. Đó giống như khi tôi cố gắng đọc mà không có kính - mọi thứ cần phải được phóng to lên 2!

CSS zoom - Với hiệu ứng动画

Bây giờ, hãy thêm một chút动画 vào phóng to của chúng ta! Đây là phần thú vị nhất.

@keyframes zoomInOut {
    0% { zoom: 1; }
    50% { zoom: 1.5; }
    100% { zoom: 1; }
}

.animated-zoom {
    animation: zoomInOut 3s infinite;
}

动画 này sẽ làm cho yếu tố phóng to và thu nhỏ liên tục. Nó bắt đầu ở kích thước bình thường, phóng to lên 150%, và sau đó trở lại kích thước bình thường - tất cả trong 3 giây, và lặp lại vô hạn.

Dưới đây là cách bạn sẽ sử dụng nó trong HTML của bạn:

<div class="animated-zoom">Nhìn tôi phóng to!</div>

Có phải đó là cool? Đó giống như yếu tố đang thở!

Ví dụ thực tế

Hãy kết hợp tất cả lại với một ví dụ thực tế. Hãy tưởng tượng chúng ta đang tạo một bộ sưu tập ảnh nơi các hình ảnh phóng to khi bạn di chuột vào chúng:

<div class="gallery">
    <img src="cat1.jpg" alt="Mèo cute" class="gallery-img">
    <img src="cat2.jpg" alt="Mèo cute khác" class="gallery-img">
    <img src="cat3.jpg" alt="Mèo cute khác nữa" class="gallery-img">
</div>

.gallery-img {
    width: 200px;
    height: 200px;
    transition: zoom 0.3s ease;
}

.gallery-img:hover {
    zoom: 1.2;
}

Trong ví dụ này, khi bạn di chuột vào một hình ảnh, nó sẽ mượt mà phóng to lên 120% kích thước ban đầu. Đó giống như các con mèo đang nhảy ra để chào hỏi!

Kết luận

Và thế là bạn đã qua các基础知识 của CSS zoom. Nhớ rằng, giống như bất kỳ công cụ nào trong bộ công cụ mã hóa của bạn, hãy sử dụng zoom một cách khôn ngoan. Quá nhiều phóng to có thể làm cho trang web của bạn trông giống như một gương nhà ma!

Thực hành với các ví dụ này, thử nghiệm với các giá trị khác nhau, và sớm bạn sẽ tạo ra các hiệu ứng phóng to làm cho trang web của bạn nổi bật. Và谁知道呢? Có lẽ một ngày nào đó bạn sẽ vượt qua tôi trong kỹ năng CSS!

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó. Đến gặp lại các bạn vào lần sau, đây là giáo viên CSS hàng xóm thân thiện của bạn, đang tạm biệt!

Credits: Image by storyset