单行文字来回滚动效果-使用CSS3动画animation

 <p class="autoScrollBox">
         <span>文字。。。。。。</span>
 </p>

分解思路 css:
1.给autoScrollBox外面的盒子一个固定：宽width、还有overflow:hidden
2.给里面滚动的内容：如果是span标签要给display:inline-block
如果是p标签就不需要，因为是块级元素可以设置宽高
然后：
white-space: nowrap;
width: max-content;
两个属性
以及动画属性： animation: scroll 10s linear infinite;
3.动画定义：
@keyframes scroll {
0% {
transform: translateX(10px);
}
50% {
transform: translateX(-50%);
}
100%{
transform: translateX(0px);
}
}

这个是来回左右滚动 其他的按需求调整

总代码：

 <p class="autoScrollBox">
         <span>文字。。。。。。</span>
 </p>
css:
 .autoScrollBox {
                width: 100%;
                overflow: hidden;

                &>span {
                    display: inline-block;
                    white-space: nowrap;
                    width: max-content;
                    animation: scroll 10s linear infinite;
                }
            }
 @keyframes scroll {
    0% {
        transform: translateX(10px);
    }

    50% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0px);
    }
}