带有 CSS 的无限气泡循环并设置 z-index

如何解决带有 CSS 的无限气泡循环并设置 z-index

我有一个问题，当我的气泡无限时，文本总是在气泡前面。这是我的代码

.main {
  background: green;
  width: 400px;
  height: 200px;
  position: relative;
}

.bubble {
    position:absolute;
    animation-duration: 2.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: Nowrap;
}

.bubble_text {
    background: yellow;
    padding: 8px;
    position: relative;
}

@keyframes slidein {
    from {
      bottom: 8px;
      right: 36px;
      width: 0;
    }
  
    to {
      bottom: 8px;
      right: 28px;
      width: 160px;
    }
  }

<div class="main">
  <div class="bubble">
    <div class="bubble_text">Hello world hello</div>
  </div>
</div>

如何解决气泡（黄色），以便在距离关键帧无限远时其位置是固定的。并且当气泡关闭时文本可以在后面的位置？

解决方法

让我们看看我是否从你的问题中得到了正确的答案...如果是这样，.bubble 元素上的一个简单的 overflow: hidden 应该可以解决问题。

.main {
  background: green;
  width: 400px;
  height: 200px;
  position: relative;
}

.bubble {
    position:absolute;
    animation-duration: 2.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: nowrap;
    overflow: hidden;
}

.bubble_text {
    background: yellow;
    padding: 8px;
    position: relative;
}

@keyframes slidein {
    from {
      bottom: 8px;
      right: 36px;
      width: 0;
    }
  
    to {
      bottom: 8px;
      right: 28px;
      width: 160px;
    }
  }

<div class="main">
  <div class="bubble">
    <div class="bubble_text">Hello world hello</div>
  </div>
</div>

,

您可以如下隐藏溢出文本： 注意 overflow: hidden; 添加到 .bubble_text 类。

.main {
  background: green;
  width: 400px;
  height: 200px;
  position: relative;
}

.bubble {
    position:absolute;
    animation-duration: 2.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: nowrap;
}

.bubble_text {
    background: yellow;
    padding: 8px;
    position: relative;
    overflow: hidden;
}

@keyframes slidein {
    from {
      bottom: 8px;
      right: 36px;
      width: 0;
    }
  
    to {
      bottom: 8px;
      right: 28px;
      width: 160px;
    }
  }

<div class="main">
  <div class="bubble">
    <div class="bubble_text">Hello world hello</div>
  </div>
</div>