Question

我有一个结合标签的css弹跳效果（该代码用于不太严肃的聊天），并且使弹跳时文本不完全可见。

这是问题的一个示例： 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;
}

带有字幕的跳动使文本不完全可见

1 个答案: