当我用css制作一个对象的动画时，我如何平滑线上其他对象的动作

Question

到目前为止，这是我的CSS。

e.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: font-size;
}
.button:hover {
  text-decoration: underline;
  transition: font-size: 2s;
  height: 2em;
  padding-top: 1.5em;
  font-size: 20px;
}
.button:active {
  position: relative;
  top: 1px;
}

html:

<div class ="button">Home</div> <div class = "button"> Products</div>
<div class ="button"> Awards</div><div class = "button">Magic</div>

在任何body标签或常规布局标签上都没有类或任何内容。虽然这成功地改变了按钮，但它在其他地方都引起了混乱。

这是一张gif图，展示了发生的事情。

我并不是在寻找解决方案，但或多或少有一些方向。有没有办法阻止线路上的其他物体做出反应？也许把它们顺利地撞到一边？

Answer 1

您可以在悬停时使用scale()使元素变大。这将防止每个元素在悬停时移动其他元素：

.button {
  position: relative;
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  background: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  border-radius: .5em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -webkit-transform-origin:50% 0;
  -ms-transform-origin:50% 0;
  transform-origin:50% 0;
  -webkit-transition: -webkit-transform .2s;
  transition: transform .2s;
}
.button:hover {
  text-decoration: underline;
  z-index: 1;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}
.button:active {
  position: relative;
  top: 1px;
}

<div class="button">Home</div>
<div class="button">Products</div>
<div class="button">Awards</div>
<div class="button">Magic</div>

请注意，我还将变换原点设置为50% 0，以便元素从顶部开始缩放。