css横排文字光影效果_css实现文字发光效果方法汇总

文字发光效果我们可以直接使用css来实现了今天我们来看一篇关于文字发光效果的例子，希望这篇文章能够帮助到各位朋友哦。

前言

我录制的慕课网视频一直没有上线，慕课网的消息说是可能加入就业课程或者系列课程。有可能年底上线，我等的花儿都谢了！因此，我昨天在看慕课网时，发现他们确实改版了，实战页面有图片扫光效果，地址我就不列了！感觉这个效果还蛮不错，其实，我之前也做过类似的效果。今天借着这个引子，来和大家一起探讨一下图片的扫光效果吧！

思路

其实扫光的思路都是一样的，不外乎是表层一个动态的光，从左往右进行一个动画运动！

但是这个运动的光，一般是用过伪元素来::after或者::before来实现的。

然后我们对这个伪元素用css的渐变gradient进行处理。

文字扫光

废话少说，我们接下来实现一个简单的扫光文字！ 代码如下 复制代码

.sample{

background-color: #0E1326;

padding-top:30px;

overflow: hidden;

}

.blank_text{

position: relative;

width:200px;

margin:20px auto;

color: #fff;

line-height: 1;

font-size: 50px;

font-size: 0.74074rem;

text-align: center;

overflow: hid