前端基础-CSS缩放zoom
程序员文章站
2022-03-29 14:48:51
...
二、缩放zoom
语法：zoom:值
取值：值是一个倍数
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
border:1px solid #000;
}
div.box:hover{
transform:scale(2);
/*zoom:2;*/
}
.box1{
width:100px;
height:100px;
background:#990;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1"></div>
</body>
| 效果 |
|---|
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
border:1px solid #000;
}
div.box:hover{
/*transform:scale(2);*/
zoom:2;
}
.box1{
width:100px;
height:100px;
background:#990;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1"></div>
</body>
| 效果 |
|---|