css文字走马灯效果 |css 根据屏幕大小 图片

.marquee{
width:300px;
margin:0 auto;
position: relative;
overflow:hidden;
}
.marquee span{
position: absolute;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
@keyframes marquee{
from{left:100%;}
to{left:-100%;
}

以上代码就是实现文字走马灯效果的CSS代码。首先，大家需要设置一个包含文字的框架，然后将文字内容放在span标签内。接下来，大家需要设置position属性为绝对定位，并使用white-space属性将换行符合并，确保文字不会换行。

接着，大家需要用到CSS3动画中的关键帧，即@keyframes属性。大家定义一个名为marquee的动画序列，将文字从右侧移动到左侧，然后重复此动画序列。所以大家需要设置animation属性的值为”marquee 10s linear infinite”，意味着用永续的时间间隔、线性过渡不断执行marquee这个动画序列。

最后，大家还需要给外层的div容器设置overflow:hidden，使超出容器部分的文字隐藏不见，达到滚动的效果。

好了，以上就是实现CSS文字走马灯效果的全部代码和原理。如果您有更好地实现方式或者使用场景，欢迎评论区留言交流。