Question

我想在我的网站上为徽标创建一个效果，基本上我希望将div显示为首先扩展为水平线的点，这可以通过设置零高度div的宽度来轻松完成

然后，我希望div的高度相对于二等分水平轴（顶部和底部彼此远离而不是仅从底部向下移动）增加。通过将div放在包含的div中并以与包含的div扩展相同的速度设置其填充动画，这也难以实现。

我的问题在于内部div中的文本。当div扩展时，我希望看到文本从其水平中心显示出来。就像拉回舞台幕布一样，但是窗帘是水平的而不是垂直的。然而，目前，文本与内部div一起移动，使得它更像是从下面被拉入视野而不是静止不动并被后退的内部div显露出来。

这是一个功能最小的例子：

@keyframes inner {
  from {
    height: 0;
  }
  to {
    height: 2em;
  }
}

@keyframes outer {
  from {
    padding: 1em 0;
  }
  to {
    padding: 0;
  }
}

.inner {
  overflow: hidden;
  animation: inner 3s;
  height: 2em;
  border: 1px solid blue;
}

.outer {
  animation: outer 3s;
  border: 1px solid red;
}

.text {
  text-align: center;
  margin: 5px auto;
}

<div class="outer">
  <div class="inner">
    <p class="text">TEXT</p>
  </div>
</div>

提前感谢您的帮助！

Answer 1

从普通文档流中删除嵌套的.text元素，方法是显示它absolute并相应地放置它相对于其包含的父元素（.inner）

现在从文档流中删除了.text并明确定义了它的位置，它不会受到其包含元素的比例变化（如height）的影响。

代码段示范：

@keyframes inner {
  from {
    height: 0;
  }
  to {
    height: 2em;
  }
}

@keyframes outer {
  from {
    padding: 1em 0;
  }
  to {
    padding: 0;
  }
}

.inner {
  overflow: hidden;
  animation: inner 3s;
  height: 2em;
  border: 1px solid blue;
  position: relative; /* required for nested absoulte element */
}

.outer {
  animation: outer 3s;
  border: 1px solid red;
}

.text {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 20px;
  margin: auto;
}

<div class="outer">
  <div class="inner">
    <p class="text">TEXT</p>
  </div>
</div>

如何在保持文本不动的同时扩展包含文本的div

1 个答案: