SOURCE

console 命令行工具 X clear

                    
>
console
const box = document.querySelector('.box')
console.log(box.scrollWidth)   //元素scroll宽度
console.log(box.offsetLeft)   //元素宽度
console.log(box.offsetWidth)   //border-box 元素宽度 = width + border + padding  包含在内
<div class="box">
    <span>我是内容</span>
</div>
html,body,*{
    margin: 0;
    padding: 0;
    /* box-sizing: content-box */
}


.box{
    margin: 10px auto;
    padding: 20px;
    position: relative;
    width: 200px;
    height: 20px;
    border: 1px solid red;
    overflow: hidden;
    white-space: nowrap;
}
.box span{
    position: absolute;
    right: 0;
    animation: animation 5s linear infinite;
}

@keyframes animation {
    0%{
        transform: translate()
    }
    100%{
        transform: translate(-100vw)
    }
}