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>

在任何身体标签或普通布局标签上都没有类或任何内容。虽然这设法改变了按钮，但它会在其他任何地方引起混乱。

Here's a gif showing you what happens.

我并不是在寻找修复，而是或多或少的方向。有没有办法阻止线路上的其他物体反应？也许可以顺利地将它们撞到一边？

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，以便元素从顶部开始缩放。

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

1 个答案: