css实现滚屏展示效果

我这里是20条数据循环展示,页面同时能展示四条数据,一次循环20s

实现无缝滑动需要把前四条数据加到最后,否则会出现数据瞬变(因为循环结束会瞬间拉回,原来位置重新向下滑动),也就是有24条数据

不说废话,直接上代码

实现滑动功能的主要代码

@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-500%);//我是按百分比设定高度,所以下滑的距离是5*height
	  }
	}
animation: myMove 20s linear infinite;
		animation-fill-mode: forwards;

 

 

整个组件代码






 

你可能感兴趣的:(#,css)