Question

我希望两张图像从页面顶部上方下来，第二张图像部分覆盖第一张图像。
当位置设置为绝对时，遮盖物有效，但它们不是来自上方页面，它们出现在底部附近。当位置设置为相对时，它们确实来自顶部，但是覆盖物不起作用。
有没有办法做我想要的东西？

＆＃13;

.float {
  position: relative;
  opacity: 0;}
@keyframes floatBubble {
  0% {bottom:100px; opacity: 1;}
  100% {bottom: 0px; opacity: 1;}}
  
#f1 {animation: floatBubble 0.5s linear 0.5s forwards;left:0px}
#f2 {animation: floatBubble 0.5s linear 0.8s forwards;left:48px}

＆＃13;

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f1">

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f2">

＆＃13;

Answer 1

所以不同地思考并使用top而不是bottom，你可以使用绝对位置来达到所需的效果：

＆＃13;

.float {
  position: absolute;
  opacity: 0;
  top:-100px;
}

@keyframes floatBubble {
  0% {
    top: -100px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

#f1 {
  animation: floatBubble 0.5s linear 0.5s forwards;
  left: 0px
}

#f2 {
  animation: floatBubble 0.5s linear 0.8s forwards;
  left: 48px
}

＆＃13;

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f1">

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f2">

＆＃13;

有关解释

当使用相对位置时，左/下方是相对于图像的初始位置计算的，这是因为它们不会重叠，因为您只需将第二个重叠到左边，所以你要远远的。

使用绝对位置时，相对于最近的位置祖先计算这些值。在你的情况下，没有这样的元素，所以他们是相对于文档的，这就是为什么你把它们放在底部。

https://www.w3schools.com/css/css_positioning.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/position

CSS：在动画中叠加图像

1 个答案: