html - 用 css 关键帧动画替换选框

Question

我想制作一个“类似播放器”的栏，像选取框一样显示正在播放的文本。目前我有这个:

<div class="bar">
    <div id="pp" onClick="pl()"><img src="play-256.png"></div>
    <div id="np" class="marquee"><p>Playlist Empty</p></div>
</div>

CSS 看起来像这样:

.bar {
    height: 50px;
    width: 800px;
    border-radius: 25px;
    background-color: brown;
    margin-top: 20%;
}
.marquee {
    width: 90%;
    float: left;
    overflow: hidden;
}
.marquee p {
    height: 100%;
    width: 100%;
    margin: 0;
    line-height: 50px;
    animation: mrq 15s linear infinite;
}
@keyframes mrq {
    0%  {transform:translateX(100%);}
    100%{transform:translateX(-100%);}
}

@media only screen and (max-width: 700px) {
.bar {
    width: 90%;
}
.marquee {
    width: 75%;
}
.marquee p {
    animation: mrq 5s linear infinite;
}
}

问题出现在responsive上:

如您所见，无论出于何种原因，响应式文本都会被隐藏。我做错了什么？

(onClick="pl()"更改“np”div 中的文本并播放/暂停歌曲)

附言我知道我写错了卫星，懒得重做动图了。

Answer 1

您可能需要防止换行，因为如果整个文本的宽度太小，它会切断文本。由于您使用的是 paragraph，只需将 display:inline 添加到样式中即可解决问题:

.marquee p {
    animation: mrq 5s linear infinite;
    display: inline;
}