html - 动画文本显示为 Div 变换

Question

在我的site (这里是 codepen 版本)我正在尝试做到这一点，以便当用户将鼠标悬停在 div 上时，它会 transition 并且背景发生变化，宽度会发生变化并出现文本.我很难理解文本。

此外，由于这是我的第一个网站，我愿意听取人们的任何意见。具体来说，我可以改进我的代码并使其更简洁。

如有任何建议，我们将不胜感激!

Answer 1

我坚持我的意见，我认为你不应该在生产网站上这样做。但您可以执行以下操作:http://codepen.io/BramVanroy/pen/WvMxLd在这里 fullscreen .

不要过度使用 flex。只有当你需要的时候。在你的情况下，你只需要将它设置为包装器。不对 body 。

flex 代码的重要部分:

.wrapper {
  display: flex;
}
.box {
  flex-basis: 0;
  flex-grow: 1;
}
.box:hover {
  flex-grow: 3;
}

对于文本的更改:

.box p {
  color: rgba(0, 0, 0, 0.3);
}

.box:hover p {
  color: black;
}