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 图标

原文地址:https://www.cnblogs.com/breakdown/p/13826019.html