css的绘制如何降低cpu占用

Question

在最近的一次编写中写了一个同心圆环的旋转动画，旋转的元素有17个，每环的旋转速度不同，且单独一环不是完整的而是中间有断开。
就这样的效果cpu占用稳定在7%左右。i7-7700HQ 四核八线程。

Answer 1

就用canvas来绘制啊

Answer 2

试试在每个元素class中加入下面属性试试，可不可以降低cpu
transform: translateZ(0);

Answer 3

直接在画布中绘制同心圆的旋转动画就行了；不要去用css3的逐帧动画加canvas去实现给感觉不伦不类的。并且你动的元素比较多；所以推荐直接用画布canvas吧。