过年宅在家，时间太多试着写篇文章。有什么不对的地方欢迎指出，谢谢。
模拟光效
光是什么样就不解释(不知道怎么解释 - -!)，说是模拟，自然是因为搞不出自然发光的物体。那么如何模拟呢？ 看下面的图：
由于有明暗的对比，亮度高的物体就会在视觉上给我们一种发光的效果。 接着来试试用代码实现一个demo：
实现完成，但效果不对啊，和上面的图对比是不是还缺少了点什么？
没关系，在看看另外一张图：
图中的光线是丁达尔效应 ，是光的一种散射，在图片上用上这种效果通常能营造出一种朦胧美。 实际通过这种散射，有助于在视觉上让我们感觉到光，即增强了光效。 看回上面两张图，就会发现刚刚用代码实现的好像就缺少了散射的效果。 那么如何实现这种效果呢？当然是用shadow啦，可能还有其他的样式也能模拟，不过这次的主角是它！
什么是shadow？
shadow有: box-shadow、text-shadow等，用法请翻MDN，不过多介绍。
这里介绍两个特点：
- 能写很多个值
.box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
background: #000;
box-shadow:
10px 10px 0 #e5e12c,
20px 20px 0 #70c5e5,
30px 30px 0 #e24fe5;
}
- 支持补间动画
接着给demo加上shadow
width: 200px;
height: 200px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 80px;
left: 80px;
box-shadow:
5px 5px 10px #eee,
-5px 5px 10px #eee,
5px -5px 10px #eee,
-5px -5px 10px #eee,
5px 5px 30px #aaa,
-5px 5px 30px #aaa,
5px -5px 30px #aaa,
-5px -5px 30px #aaa;
4个为一组，第一组模糊距离短（10px），会比第二组的稍微亮一点，同时靠近中心圆，又比中心圆暗淡一点，这样在视觉上会觉得中间圆更加亮， 两组加起来，模拟光线渐渐变弱的效果。 当然，为了更好的效果，可以设置更多组。
和第一个效果比起来更加亮了。并且加上box-shadow后，有点内味了。
小结
内容其实就这么多，上面只是介绍了一种在css中模拟光效的方式，有了光效，在发挥我们的想象力，就可以用css实现更多好玩又酷炫的效果， 比如用text-shadow实现霓虹文字：
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
font-size: 100px;
color: #fff;
letter-spacing: 10px;
text-shadow:
0 0 1px #ad6aea,
1px 0 2px #ad6aea,
-1px 0 2px #ad6aea,
1px 0 5px #ad6aea,
-1px 0 10px #ad6aea;
然后加点其他特(样)效(式)就能变成：
嘿嘿，祝大家新年快乐！
demo2地址
下面是用box-shadow实现的：
温馨提示：最后两个demo用了大量的css3动画，手机上看起来应该会比较卡！
