呼吸灯
来源: 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);
网友评论