先看以下代码
1 <body> 2 <style> 3 .show { 4 text-align: center; 5 transition: all 1s ease-out; 6 } 7 .show:hover { 8 transform: scale(2); 9 } 10 .show1 { 11 background-color: crimson; 12 </style> 13 <div> 14 <p class="show show1">我是块级元素</p> 15 </div> 16 </body>
体验到p元素缩放的神奇之处之后，我又做了以下尝试
<body>
<style>
.show {
text-align: center;
transition: all 1s ease-out;
}
.show:hover {
transform: scale(2);
}
.show2 {
background-color: deepskyblue;
}
</style>
<div>
<span class="show show2">我是行内元素</span>
</div>
</body>
发现怎么都不缩放呢？发现原来是由于行内元素不能设置宽高，因此也就无法缩放了，因此做了如下设置
<body>
<style>
.show {
text-align: center;
transition: all 1s ease-out;
}
.show:hover {
transform: scale(2);
}
.show3 {
background-color: lawngreen;
display: block;
}
</style>
<div>
<span class="show show3">我是块级元素</span>
</div>
</body>
成功缩放！另外还有inline-block也是可以进行缩放
<body>
<style>
.show {
text-align: center;
transition: all 1s ease-out;
}
.show:hover {
transform: scale(2);
}
.show4 {
background-color: lightsalmon;
display: inline-block;
}
</style>
<div>
<span class="show show4">我是行级-块级元素</span>
</div>
</body>
可以尝试一下display: flex;