Question

当将每个字母悬停在其底部时，如何阻止每个字母出现故障？发生这种情况是因为字母改变了位置，所以它迅速切换了它的过渡，但是如何更好地编码此字母，这样过渡才能平稳？ https://codepen.io/anon/pen/XBmPMV

<div class="container">
  <div id="text">
    <span>A</span>    
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    </div>
</div>

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
  span {
    display: inline-block;
  transition: transform 200ms;
    &:hover {
      transform: translateY(-1em) rotate(10deg) scale(1.5);
    }
  }

}

Answer 1

考虑一个伪元素，它将使悬停区域变大：

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
}

span {
  display: inline-block;
  transition: transform 200ms;
  position: relative;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

span:hover {
  transform: translateY(-1em) rotate(10deg) scale(1.5);
}

span:hover::before {
  transform:rotate(-10deg);
  height: calc(100% + 0.5em);
}

<div class="container">
  <div id="text">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
  </div>
</div>

Answer 2

在元素上悬停以增加其面积时对它们应用边框可以达到目的。如果您沿此路线行驶，则还需要在悬停时施加负边距以将元素保持在适当位置。

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
  span {
    display: inline-block;
  transition: transform 200ms;
    &:hover {
      transform: translateY(-1em) rotate(10deg) scale(1.5);
      border: 0.3em solid transparent;
      margin: -0.3em;
    }
  }
}

悬停在元素故障上可转换过渡

2 个答案: