使用 CSS 并设置 z-index 的无限气泡循环

Question

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

.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>

如何解决气泡（黄色）使其在关键帧无限大时位置固定。当气泡关闭时文本可以在后面的位置？

Answer 1

您可以隐藏溢出文本，如下所示：注意 overflow: hidden; 添加到 .bubble_text class.

.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>

Answer 2

让我们看看我是否从你的问题中得到了这个...如果是这样，.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>

使用 CSS 并设置 z-index 的无限气泡循环

Infinite bubble loop with CSS and set z-index

html

css

keyframe