纯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;
} 

最后效果就出来了。

接下来放上码上掘金的地址这里有全部代码↓

最后

整理了75个JS高频面试题并给出了答案和解析基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴可以点击下方卡片领取无偿分享