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