极客教程CSS 缩放
CSS 的 zoom 属性在控制元素的放大级别方面非常有用。
zoom 是 CSS 的非标准属性，建议使用 transform: scale() 函数获得相同的输出结果。
可能的值
- normal ：指定元素应该以正常大小呈现。
-
reset ：指定元素在用户应用非捏合式缩放之前不应该进行放大。 不推荐 ，请使用 unset 值。
-
<percentage>：任何百分值称为缩放因子。- 值等于 100% 是 normal 。
-
值大于 100% 表示元素应该 放大 。
-
值小于 100% 表示元素应该 缩小 。
-
<number>：与百分比值相对应的任何数字值。例如：1.0 = 100% = normal。- 值等于 1.0 是 normal 。
-
值大于 1.0 表示元素应该 放大 。
-
值小于 1.0 表示元素应该 缩小 。
适用于
所有的 HTML 元素。
DOM 语法
object.style.zoom = "normal | reset | <number> | <percentage>";
示例
这是一个示例：
<html>
<style>
p.normal {
zoom: normal;
}
p.percent {
zoom: 170%;
}
p.number {
zoom: 4;
}
p.unset {
zoom: unset;
}
</style>
<head>
</head>
<body>
<p class="normal">Normal size</p>
<p class="percent">Zoom in percentage</p>
<p class="number">Zoom in number</p>
<p class="unset">Zoom settings reverted.</p>
</body>
</html>
这里是另一个例子：
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 5px;
border: 1px solid black;
}
div#m {
background-color: orange;
zoom: 200%;
}
div#n {
background-color: lavender;
zoom: 1.5;
}
div#o {
background-color: palevioletred;
zoom: normal;
}
</style>
</head>
<body>
<div id="m" class="box"></div>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
</body>
</html>
这是一个例子，当鼠标悬停在h1元素上时，它会放大：
<html>
<head>
<style>
p {
border: 1px solid red;
}
p.percent {
zoom: 170%;
}
p.number {
zoom: 4;
}
h1:hover {
zoom: 250%;
text-decoration-line: underline;
}
</style>
</head>
<body>
<h1>Hover to Zoom</h1>
<p class="percent">Zoom in percentage</p>
<p class="number">Zoom in number</p>
</body>
</html>
这是一个示例，其中动画在鼠标悬停时添加，同时还有缩放效果：
<html>
<head>
<style>
div.box {
width: 25px;
height: 25px;
vertical-align: middle;
display: inline-block;
transition: transform .5s;
padding: 10px;
}
div#a {
background-color: rgb(58, 220, 22);
zoom: normal;
}
div#b {
background-color: rgb(239, 86, 137);
zoom: 200%;
}
div#c {
background-color: rgb(223, 217, 44);
zoom: 2.9;
}
div.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>Animation added on hover</h1>
<div id="a" class="box"></div>
<div id="b" class="box"></div>
<div id="c" class="box"></div>
</body>
</html>