我有一个容器,我想展开它以在容器完全展开后显示绝对位于右下角的内容。
使用 CSS 扩展容器非常简单。
@keyframes test-grow {
100% {
width: 100%;
height: 30rem;
}
}
.test {
width: 2rem;
height: 2rem;
animation: test-grow 5s forwards;
}
棘手的部分是揭示其中的内容。使用简单的绝对定位是行不通的,因为无论大小,内容都会固定在容器的右下角,因此随着容器的增长,它会随着容器的一 Angular 移动。
这是我想要实现的目标的快速 GIF 示例:http://imgur.com/pRneSJr但我的揭示会从一个 Angular 落到另一个 Angular 落很顺利。
我这里有一支笔:http://codepen.io/abbasinho/pen/QyrZOm?editors=1100显示容器动画。但您会看到我对内容的质疑。
如有任何帮助,我们将不胜感激。
最佳答案
繁荣。你去吧
.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;
}
关于jquery - 使用 CSS 和/或 jQuery 动画化一个 div 以显示绝对定位的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35073099/