前言

之前在做音乐播放器的项目时，想要中间的歌曲名自动从右向左滚动，于是就实现了这个样式

具体实现

html部分

 <div class="words">
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>

css部分

.words {
    width: 150px;
    margin: auto;
    border:1px solid black ;
    
    /* 超出部分隐藏 */
    overflow: hidden; 
}

.words p {
    float: left; 
    
    /* 控制文字在一行内显示 */
    word-break: keep-all;
    white-space: nowrap;
    
    /* 添加定义好的动画，并均匀移动（linear）且不断重复（infinite） */
    animation: 10s wordsLoop linear infinite;  
}

/* 添加鼠标经过时，停止移动 */
.words p:hover {
    animation-play-state: paused;
}

/* 添加动画，表示从右到左移动距离 */
@keyframes wordsLoop { 
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);

    }
}

效果图

总结

实现过程中遇到这么一个问题，就是如果你整个文字长度超过了整个div设置的宽度，它是不能够实现整段文字完全从右到左直至消失的效果的。

因为translateX(100%)是相对于自身，也就是p标签而言的，但是p宽度是继承于div的，所以translateX(100%)是本质上是相对于div宽度而言的，但是当文字很长，已经超过div设置的宽度了，translateX(100%)是还是相对于p（div）宽度向左移动，所以解决办法就是需要让p不受外部div的限制，其实方法有许多，我这里是添加的浮动float