[分享]css中循环播放一组数据

CSS中循环播放一组数据非常简单，只需要利用animation动画属性和@keyframes规则即可。

/* 定义一个名为scroll的动画 */
@keyframes scroll {
  /* 定义起始状态 */
  0% {transform: translateX(0);}
  /* 定义结束状态 */
  100% {transform: translateX(-100%);}
}

/* 给需要滚动的元素添加scroll动画 */
.scroll-element {
  /* 动画持续10s，线性运动 */
  animation: scroll 10s linear infinite;
  /* 横向溢出隐藏 */
  overflow: hidden;
} 

解释一下代码：

首先使用@keyframes定义一个名为scroll的动画，这个动画从0%到100%分别对应着起始和结束状态，通过transform属性改变元素的位置实现滚动效果。这里我们让元素向左移动100%的距离，等于将元素移出舞台。

接下来在需要滚动的元素上添加scroll动画，这里我们将滚动元素的类名设为.scroll-element。animation属性用于添加动画，这里我们指定scroll动画，持续10秒，使用线性运动，重复播放，即无限循环播放。

最后，为了防止溢出影响布局，我们将元素的overflow属性设置为hidden，横向溢出时隐藏。

通过这个简单的例子，我们可以轻松实现CSS中循环播放一组数据的效果。