CSS - 缩放：初学者的指南
你好啊，未来的CSS魔法师们！今天，我们将要深入CSS缩放的世界。如果你之前从未写过一行代码，也不用担心——我会成为你这次旅程中的友好向导。在本教程结束时，你将能够像专业人士一样在网页上缩放！
什么是CSS缩放？
在我们开始之前，让我们先了解一下CSS缩放是什么。想象你有一个放大镜，可以在网页上放大或缩小事物。CSS缩放属性本质上就是这样做的！它允许你放大或缩小元素，影响它们的大小和位置。
可能的值
让我们来看看我们可以与缩放属性一起使用的不同值：
| 值 | 描述 |
|---|---|
| normal | 默认值，不应用缩放 |
| 缩放级别为百分比（例如，150%） | |
| 缩放级别为数字（例如，1.5） |
现在，让我们详细探索每一个！
应用范围
在我们跳入代码之前，了解我们可以在哪里使用缩放属性是很重要的。它可以应用于所有元素，包括::before和::after伪元素。这意味着你可以缩放网页上的几乎所有东西！
DOM 语法
要在CSS中使用缩放属性，你需要知道基本语法。如下：
元素 {
zoom: 值;
}简单吧？现在，让我们看一些具体的例子！
CSS缩放 - normal值
'normal'值就像告诉你的网页，“嘿，做你自己！”这是没有应用缩放的默认状态。
.my-element {
zoom: normal;
}在这个例子中，.my-element将以原始大小显示。就像我在班级的第一天告诉我的学生“做你自己”一样——不需要试图看起来更大或更小！
CSS缩放 - 值
现在，让我们来点有趣的！我们可以使用百分比来放大或缩小。
.zoom-in {
zoom: 150%;
}
.zoom-out {
zoom: 50%;
}在这里，.zoom-in将使元素变为原来的1.5倍大，而.zoom-out将缩小到原来大小的一半。就像我不小心将手机文本大小设置为200%——突然，一切都变大了！
让我们看看它是如何工作的：
<div class="zoom-in">我被放大了！</div>
<div class="zoom-out">我被缩小了！</div>第一个div将显示得更大，而第二个将更小。试试看，看看区别！
CSS缩放 - 使用数字值
使用数字是控制缩放的另一种方式。它的工作方式与百分比类似，但没有%符号。
.big-zoom {
zoom: 2;
}
.small-zoom {
zoom: 0.5;
}在这种情况下，.big-zoom将元素大小加倍，而.small-zoom将其缩小到一半。就像我试图不戴眼镜阅读时——一切都需要放大到2倍！
CSS缩放 - 带动画
现在，让我们来个大结局——给我们的缩放添加一些动画！这是事情变得真正有趣的地方。
@keyframes zoomInOut {
0% { zoom: 1; }
50% { zoom: 1.5; }
100% { zoom: 1; }
}
.animated-zoom {
animation: zoomInOut 3s infinite;
}这个动画将使元素不断地放大和缩小。它从正常大小开始，放大到150%，然后回到正常大小——所有这些都在3秒内完成，并且无限重复。
在HTML中这样使用：
<div class="animated-zoom">看着我缩放！</div>这酷不酷？就像元素在呼吸一样！
实际示例
让我们通过一个实际示例来整合所有内容。想象我们正在创建一个图片库，当鼠标悬停时，图片会放大：
<div class="gallery">
<img src="cat1.jpg" alt="可爱的猫" class="gallery-img">
<img src="cat2.jpg" alt="另一只可爱的猫" class="gallery-img">
<img src="cat3.jpg" alt="还有一只可爱的猫" class="gallery-img">
</div>.gallery-img {
width: 200px;
height: 200px;
transition: zoom 0.3s ease;
}
.gallery-img:hover {
zoom: 1.2;
}在这个例子中，当鼠标悬停在图片上时，它会平滑地放大到原始大小的120%。就像猫跳出来说你好一样！
结论
那么，伙计们，你们刚刚了解了CSS缩放的基础。记住，像你工具箱中的任何工具一样，明智地使用缩放。过多的缩放会让你的网页看起来像哈哈镜！
用这些例子练习，尝试不同的值，很快你就能创建出令人眼花缭乱的缩放效果。谁知道呢？也许有一天你会在CSS技能上超过我！
继续编码，继续学习，最重要的是，享受其中的乐趣。下次见，这是你友好的CSS老师，签名再见！
Credits: Image by storyset