效果
css部分
div {
background-color: #0000008a;
width: 100px;
}
p {
color: white;
font-size: 13px;
/* 宽度与实际长度一致 不换行 */
width: max-content;
animation: move 10s linear infinite;
/* 内容特别少的时候不动*/
min-width: 100%;
}
@keyframes move {
0%,
20% {
transform: translateX(0px);
}
80%,
100% {
transform: translateX(calc(-100% + 100px));
}
}
html部分
<div>
<p> Hi Lisa 我是一段很长的很长的很长很长的很长的很长的文字。</p>
<p> Hi 李爽</p>
</div>
js部分
根据内容长度自动设置滚动速度
[...document.querySelectorAll('p')].forEach(p => {
p.style.setProperty('--duration', p.offsetWidth / 100 * 0.9 + 's');
})
_1604852126107.png)
_1603294502508.jpg)