Question

我遇到以下问题：我有一个盒子，里面有一些内容。我希望他们两个都能以相同的速度和相同的比例增长。但是它仍然会发生变化，所以换线在小状态到大状态时是不同的。

如果我删除边距，它会起作用，但边距/填充很重要。我有以下代码：

.box{
  width: 100px;
  height: 100px;
  background: #f00;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: all 2s linear;
}

.content{
  font-size: 6px;
  transition: font-size 2s ease;
  margin: 0 20px;
  text-align: center;
  transition: all 2s linear;
}

.box:hover{
  width: 300px;
  height: 300px;
}
.box:hover .content{
  font-size: 18px;
  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
</body>
</html>

Answer 1

如果我理解正确，您希望保持行数不变，并使转换看起来更平滑。然后，您可以使用transform: scale(n)来更改元素的大小：

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background: #f00;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 2s linear;
  transform-origin: left top;
}

.content {
  font-size: 6px;
  transition: font-size 2s ease;
  margin: 0 20px;
  text-align: center;
  transition: all 2s linear;
  transform-origin: left top;
}

.box:hover,
box:hover .content {
  transform: scale(3);
}

＆＃13;

<div class="box">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

＆＃13;

当我申请保证金时，为什么我的盒子里面没有内容增长？

1 个答案: