You're never really done for, as long as you‘ve got a good story and someone to tell it to.

DIV总内容超长实现自动滚动

效果

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');
})

Watch the video

# CSS  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×