1.动画——霓虹灯、
本期我们要实现一个开关控制的霓虹灯，难度系数2.5
该动画主要通过css实现，简单js代码实现开关控制霓虹灯效果. 通过盒子阴影实现立体的灯管和灯管的发光，通过文本阴影实现霓虹灯文字，结合css动画实现霓虹接触不良，或是电压不稳的效果；按钮开关主要通过组合渐变背景来实现。
2.分析需求——庖丁解牛
a.立体的灯管
用box-shadow的多层阴影，绘制霓虹管的立体效果
b.立体的文字
用text-shadow多层阴影，绘制文字灯管，发光，投影，
全部可通过设置不同的阴影参数实现
扫描二维码关注公众号，回复：
3558018 查看本文章
c.霓虹灯的闪烁效果
外围灯管闪烁，可做两个灯管形状的标签，完全重合 ，
上层实现灯管效果，下层实现光晕效果，并闪烁。
文字灯，需要设置熄灭和点亮两个状态的text-shadow，
不同速度的切换，就形成不同类型闪烁效果。
3.不规则的灯管
我们要做的灯管是不规则形状，看起来似乎无法用css实现；其实就是在元素box的四个角使用了不同的border-radius参数而已。
border-radius的参数一共有8个：
border-radius: a b c d / e f g h;
其中a,b,c,d表示左上，右上，右下，左下圆角的水平半径；e,f,g,h表示左上，右上，右下，左下圆角的垂直半径。如果单独设置类似下面的形式：
border-top-left-radius: a b；
更多内容欢迎大家扫码订阅《躁动的web动画》，有更多精彩动画的教程和源代码，每周更新
