css文字跑马灯效果

正文开始

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

查看演示效果

正文结束

Flex 布局教程:语法篇 纯CSS写九宫格样式,高宽自适应正方形