Question

我有一个容器，我想扩展它，以显示容器完全展开后绝对位于右下角的内容。

使用CSS扩展容器非常简单。

@keyframes test-grow {
  100% {
    width: 100%;
    height: 30rem;
  }  
}

.test {
  width: 2rem;
  height: 2rem;
  animation: test-grow 5s forwards;
}

棘手的部分是揭示其中的内容。使用简单的绝对定位不起作用，因为内容修复了容器的右下角，无论它的大小如何，因此随着容器的增长它随着容器的角移动。

以下是我想要实现的快速GIF示例：http://imgur.com/pRneSJr但是我的曝光将从一个角落到另一个角落。

我在这里用笔：http://codepen.io/abbasinho/pen/QyrZOm?editors=1100显示容器动画。但是你会看到我对内容的问题。

感谢任何帮助。

Answer 1

动臂。你去了

.test {
  position: relative;
  width: 2rem;
  height: 2rem;
  background: rgba(white, 0.5);
  animation: test-grow 5s forwards;
  overflow:hidden;
}

h1 {
  font-family: Helvetica Neue, Helvetica, Arial;
  font-weight: bold;
  font-size: 200px;
  position: absolute;
  top:  18rem;
  left: 28rem;
}

使用CSS和/或jQuery为div设置动画以显示绝对定位的内容

1 个答案: