css 绘图技巧

最近性能优化， 随着各种对js优化的技术升级（小程序，weex）。 最后影响首屏渲染交互的还是图片的加载问题。 特别是活动这样强调首屏交互的重点场景，css绘图的效果性能角度没有办法被替代，问题是成本是调试变更代价大。

练习下css 的绘图能力

1.普通径向渐变 旋转效果。 

 思路： 简单的径向渐变 加上旋转，实现光点变化的效果

2.css loading1

 

3.draw border

思路： 前后伪类元素 改变宽高，trabsition 注意属性变换的延时。 实现画边框的效果。 细节： border 效果可以通过box-shadow 写法 hook实现，能被伪类元素的覆盖

   box-shadow: inset 0 0 0 2px $red;　　

 

 

2、electron 图标