呼吸灯和闪光特效研究

呼吸灯

来源: https://codepen.io/rozbo/pen/XKkkYQ

breathing-light.gif

分析这位小哥的实现：

• 设计能力：这种特效，对配色的要求很高，经典的黑配绿，极客最爱。
  颜色值：

    body背景色： #151515
    输入框背景色： #222
    输入框背景渐变：#333, #222
    输入框border颜色：#444  
    输入框字体颜色： #888
    暗绿：#393
    亮绿：#6f6
    box-shadow颜色：rgba(0,255,0,.2), rgba(0,255,0,.6)
  

• box-shadow 巧妙应用，阴影产生柔和的视觉变化。
  各位可查看这位小哥的源码，我认为最巧妙的地方就是使用box-shadow来完善边框颜色的变化，避免颜色生硬的变化。

闪光

腾讯理财通里面，会员名片有这个效果。

来源：https://www.jianshu.com/p/771a09bd79cf

核心就是实现一个闪光条。
作者使用 linear-gradient 实现的，动画使用的 transition 貌似会卡顿。

本人想了另外一种实现，使用 box-shadow 实现闪光条，建议使用 animation 实现动画

background: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);