<style>
.mp3Player {
width: 200px;
background-color: #ddd;
}
.mp3Player .songInfo {
font-size: 12px;
color: #fff1af;
margin-left: 4px;
white-space: nowrap;
max-width: 133px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.mp3Player .songInfo .text_ {
position: relative;
/* 盒子背景宽度将随文字宽度而进行自适应 */
width: fit-content;
/* 添加动画 */
animation: moveSong 14s linear infinite;
/* 让前面的几个文字有一个初始的距离,达到更好的呈现效果 */
padding-left: 100%;
}
.mp3Player .songInfo .text_::after {
position: absolute;
right: -100%;
content: attr(text);
}
@keyframes moveSong {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div class="mp3Player">
<div class="songInfo"><div class="text_">beyond 爱过的罪.mp3</div></div>
</div>
查看演示效果