文中已经参与「 . 」
纯CSS完成跑马灯效果
又是一个静谧的夜里，也是没有灵感的一天，又只能找逛一逛codepen。看到一个幻影的外框实际效果，就想怎样通过自己的方式来现这样一个实际效果。
忽然又想起马路边夜市街招牌，这不就是一个幻影实际效果加一个广告宣传语吗。这一下我的兴趣一下就激发起来了。
最先上一个设计效果图
那这儿的广告宣传语也写我名字吧，这都不重要，下面让我们一起看看是如何完成吧。
结构特征
最先非常明显大家用了一个盒子将文本装起来，并将文本展开了垂直居中，最后我们见到这盒子的周围紧紧围绕了两条光条，那这两根光条是如何完成的？
其实这也是用四个盒子达到的，便是我们将要这四个盒子各自放到大盒子的周围（紧靠这大纸盒的内腔），然后使用这些盒子完成跑马灯效果。
下面我们就详细了解一下的实现效果
代码编写
外界大盒子
最先准备一个div小盒子，用于装大家的广告语，也有流水灯的四个盒子。
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
派大星
</div>
这一小盒子就做好准备 我们给这一岂止设定一点款式，使他用浏览器中能够被我们可以看到
.main{
width: 100px;
height: 40px;
background-color: transparent;
/* 小盒子垂直居中 */
position: absolute;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -50px;
/* 文字居中 */
text-align: center;
line-height: 40px;
font-family: '宋体字';
color: aquamarine;
overflow: hidden;
}
我们给这一大盒子设置权限宽高比，及其背景色，那样促使我们自己的小盒子用浏览器中看起来没有那么生硬，而且我们将要小盒子用浏览器中垂直居中，并将小盒子里边的文本也开展垂直居中，不要问我为什么一定要垂直居中，实属我强迫思维。
至今为止，咱们就已经将大盒子做好准备，实际效果就是这个样子：
下面我们给大盒子设定灯光照明。
内部结构灯光照明
毕竟是灯光照明，那色调就必须要亮，在这里我选择#0FF颜色，在整体效果图上，大家可以看到灯光效果尾部的色调很淡，展示出一种过渡效果，部件从头顶部渐渐地转换到盒子的本来色泽。
那这种效果是如何完成的？
这里也需要使用background的一个新的含义值:linear-gradient,通过这些特性，我们可以将好几个颜色设置为一个盒子的背景色，同时还有过渡效果，更优秀之处在于，这一基础属性能设渐变色方向。
词法：
linear-gradient(渐变色方位,color1,color2,color3...)
那么就广泛使用这一基础属性，大家写其中一个盒子效果，别的效果完成方法都相近。
.main :nth-child(1){
background: linear-gradient(to right, transparent , #0FF);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
}
我们这边设定是指上方的灯光照明，接下来我们应用top和left的特性，设定这一纸盒的部位；应用width:100%，促使这一纸盒的总宽与大盒子保持一致，然后使用height:1px,将灯光效果条总宽设为1px,当然也可以依据实际需要，更改灯光效果条总宽。
然后剩余三条光线的完成基本原理基本一致，仅有位置和方向背景色不一样。
剩余背景色的渐变色方位各是to bottom、to left、to top。
最后实际效果就这样：
是否离你最后的实际效果更像了，正确的，大家只差最终一部，给灯光效果再加上动态效果。
光线的动态效果
讲到动态效果，那一定离不了@keyframes,大家使用这个特性为他们的灯光效果加上动态效果。
一样大家也设定上方的灯光照明做为示范性：
动漫：
@keyframes run1{
0%{
transform: translateX(-200px);
}
100%{
transform: translateX(200px);
}
}
小盒子：
给小盒子再加上动漫
.main :nth-child(1){
animation: run1 1s linear infinite;
}
前边大家没有设置动漫以前，能够看见色调最深刻的一部分在右面，可是流水灯的实现需求也是需要色调最什么一部分从左侧发生，随后移到右侧，全部我们这边将动画初见部位向偏移全部纸盒的长短。那样就实现了要求。
其他一些盒子完成的形式如出一辙。
下面我们来看一下实际效果：
这时我们可以看到该动漫稍显乱，大家根据使用动漫延迟来达到我们想要的动态效果。
我们可以从第二个盒子逐渐加上延迟：每一个小盒子比前一个盒子多0.5的延迟。
.main :nth-child(2){
animation-delay: .5s;
}
.main :nth-child(3){
animation-delay: 1s;
}
.main :nth-child(4){
animation-delay: 1.5s;
}
最终实际效果就来了。
下面放入码上AdminJS地址，这里还有所有编码：↓
