纯CSS打造酷炫霓虹灯loading bar特效

本篇文章我们要来实现一个酷炫的霓虹灯特效的加载条loading bar的特效，如下图所示：

可以看到，这个loading bar的周围有霓虹灯一样的朦胧美感，而且底部还有一个倒影，这是怎么做到的呢？

相关知识点

首先要介绍一下这个demo要用到的知识点：

• linear-gradient实现颜色渐变，颜色渐变的方向默认是从上往下的，当linear-gradient函数的第一个参数传入一个正角度的时候，渐变轴会逆时针旋转相应角度，由于我们的loading bar是从左往右运动的，所以渐变方向也应当设置成90deg
• filter: blur()实现霓虹灯特效，使用::before渲染渐变色背景，再用一个相同的::after套上filter: blur()就可以实现霓虹灯特效了
• -webkit-box-reflect实现底部倒影的效果，但是这个样式有兼容性问题，mdn上并不推荐使用，可以选择用element()函数替代，感兴趣的可以自行了解，这里我只是为了方便就使用这个样式了哈哈
• @keyframes定义并使用流动动画