我有一个包含一些数据的矩形表,它的字体大小和宽度非常小(只是盒子形状) 每当我将它悬停时,它都会转换:scale(6.0)(尺寸变大 6 倍) 例如,我有一个包含 9 个矩形的表格,总元素和最后一个元素位于 x = 500px,y = 500px。 当它悬停时它变得更大(6 倍大小),但是当我的鼠标悬停在 501 501 或更多点时它关闭时,我想增加工作半径,每当我悬停我需要的元素时。 我确实将 class multi 用于我需要在悬停时增加尺寸的元素。
.multi{
background-color: #ffffff;
transition: transform .2s; /* Animation */
border: 1px solid black;
}
.multi:hover {
transform: scale(6.0);
}
最佳答案
如果需要,请删除宽度、高度和背景属性。同时将比例更改为 6.0(我以 1.2 为例)。
.multi {
width: 100px;
height: 100px;
background: red;
-webkit-transition-property: transform; /* Safari */
-webkit-transition-duration: 0.2s; /* Safari */
transition-property: transform;
transition-duration: 0.2s;
}
.multi:hover {
transform: scale(1.2);
}
<div class="multi"></div>
关于html - 如何增加变换: scale radius when hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56167186/