0.前言
2016年08月18日 今天看到注意到苹果手机的滑动解锁，提示字上会有一道白光闪过，感觉很炫酷，所以突然就来了兴致想要做一个当鼠标放在字体上(模拟手指)时，白光一闪而过，照亮字体的效果。
1.思路
首先呢，需要做出来一道倾斜的白光，这道白光就是用来实现“照亮字体”的效果的。
这一步做好之后，接下来的事情就简单了，也就是让白光先消失，然后当鼠标移动到字体上的时候，白光出现，从字体上划过。
2.白光的制作
上面的图片可以看到，就是白光的边缘不是由白色直接变成黑色，而是渐变成黑色。所以，我们在制作这到白光的时候，需要用CSS中的渐变。 <linear-gradient>
制作过程
首先我们先创建一个div，设置一个简单的居中默认样式。
代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
div{
width: 700px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>