前言

随着Web技术的发展，我们日常所接触到的网站已经远非当初简单粗糙。让网站更具有视觉冲击力是我们设计师追求的目标之一。水平滚动效果就是其中之一。本篇文章将为大家介绍如何利用“repeat-x”属性来打造酷炫的水平滚动效果。

什么是repeat-x？

在我们快速过一遍CSS基础元素时，我们会学习到背景相关的CSS属性，其中一个重要的CSS属性就是background。其中background有以下几个子属性：background-color、background-image 、background-repeat、background-position、background-size。

其中涉及到文章的属性是background-repeat。顾名思义它的作用是控制背景图片是否重复出现，它有两个值：repeat 和 no-repeat 。

那么repeat-x 是什么呢？ repeat-x 是 background-repeat 的属性值之一，用于控制背景图片在水平方向上的重复次数。

怎么用repeat-x 打造水平滚动效果？

简单而言，水平滚动效果就是在指定元素上创建一条水平直线，并在这条线上实现一个连续的动画效果。最简单的情况下，通过滑动溢出的内容逐渐显示隐藏内容，超越限制范围，随着时间的推移，内容将水平滚动。

在下面的例子中，我们将演示如何使用repeat-x属性来打造一个简单的水平滚动效果。

HTML结构

首先，我们需要确定摆放图片的位置，我这里用ul、li实现。

```html