html - 用选取框弹跳使文本不完全可见

Question

我有一个 css bounce-effect 结合了一个标签(该代码用于不太严肃的聊天)，它使文本在弹跳时不完全可见。

这是问题的一个例子: https://jsfiddle.net/ohkgqy13/1/

这是 CSS:

bounce {
    display: inline-block;
    animation: bounce 1s infinite alternate;
    -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

.container {
  background-color: #eee;
}

和 HTML:

<div class="container">
    <marquee><bounce>ASDF</bounce></marquee>
</div>

我不知道如何解决这个问题。感谢您的帮助。

Answer 1

文本溢出其容器。增加行高，以便在溢出之前有更多空间。如果您需要更高的边距，您可以随时更改上边距以抵消它。

<div class="container" style="line-height: 60px; margin-top: -5px;">
<marquee><bounce>ASDF</bounce></marquee>
</div>

bounce {
    display: inline-block;
    animation: bounce 1s infinite alternate;
    -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(-20px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(-20px);
  }
}

.container {
  background-color: #eee;
}