【大屏可视化】 flex布局下的css水平方向无限无缝滚动

大屏可视化

---

---

flex布局下的css水平方向无限无缝滚动

/* flex布局下的css水平方向无限无缝滚动 */
/*
	参考地址: https://blog.csdn.net/A_Common_Man/article/details/123468712
	参考地址: https://blog.csdn.net/m0_51431448/article/details/121707658
	核心代码:
		首先如果你是纯div设计的话,要保证div足够的多
		.lunbo == 外层div  要设置 overflow: hidden;
		.lunbo ul === div下直系子div(也就是循环数据的div的上一级div)
			这里要设置: animation: left_move 3s linear infinite;animation-play-state: running;
		.lunbo ul li === 循环数据的div
			这里要设置: flex-shrink: 0;
		最后要写上这个
*/
	@keyframes left_move {
	  to{
	    /* 这里偏移的应该是8个盒子的长度，留下四个相同的盒子补上空缺造成视觉差 */
	    transform: translateX(-8.3333rem);//该单位是设计稿width:1920px来换算的
	  }
	}