前言

无意见看到了一个网站的一个动画的跑马灯效果很不错，这篇博客将用css实现跑马灯效果，剖析它是如何实现的！并且我也推荐用css实现这种无缝滚动的跑马灯，效果看起来更平滑，用js定时器实现的会有明显的抖动效果！

最终效果

源码在文末获取!

目标网站效果：

我做出的效果：

当然你要是放一些好看的图片就看起来更好了，这里只是对标我项目需求，没有更换好看的图片！

做法分析

这个效果用css实现很简单，无非就是一个css动画，鼠标移动到上面动画暂停。

这张图显示怎么做很清晰吧！让比较长的小盒子在红色盒子里滚动就行，然后超出这个红色视口盒子就隐藏！

也就是让css动画向左移动蓝色盒子的长度，然后让动画无限循环！

当然，这里我要重点说的是这个bug，这样做的最终并不是无缝衔接的！

如上图，当一次动画结束，循环进入下一次循环的时候，后面总会有空白，对于这个问题，我们怎样实现无缝衔接滚动呢？

很简单，就是加长滚动的这个绿色盒子，给他加后面几张图片，这几张图片和开始的几张图片相同，至于加几张图片就看你的红色大盒子的长度了，也就是说红色盒子决定你能看到几张图滚动，你就要加几张图作为这个视觉误差！（放到css中，这三张图片的外边距+图片长度=红色盒子的长度，动画滚动的长度依旧不变）

现在原理搞清楚了，以后写这种效果不是很简单，当然，放到我们的实际项目中，肯定是会有一点视觉误差的，因为我们的视口盒子（图中的红色盒子）总是在项目中有固定的长度，你还要做好图片的长度计算，要不要加外边距等等，还是要算一下像素的，最后差一点像素也没关系！但是不能差太多哦！不然后面空白太多了！

至于整个页面的布局，我依旧建议建议使用flex布局，只能说flex确实快捷方便好用，这个布局中还要涉及到定位，浮动+定位的方式也会出现一些莫名的定位问题！

css在这个项目中还有一些:hover

另外，我项目中用的是bootstrap，因此下面的代码中引入了bootstrap3的css（基本没起作用，大多样式我自己写的，你要不想引入，作者头像的border-radius:50%记得设置）

源码