请问如下效果怎么实现？

Question

需求是这样的：一个带齿状圆环，左上角白色，其他部分白色渐变透明，右下角全消失（就是135deg的渐变）然后圆环可旋转可是渐变区域不变，就还是左上角白色，请问如何实现？
圆环如下图

效果参考

Answer 1

这样的一个效果？
Codepen Demo

主要是使用 transform 这个CSS属性，渐变色可以使用 background:linear-gradien()。搭配上 animation 动画就可以实现了

后面提到的从左上角到右下角的渐变透明可以使用 mask 遮罩来实现。

阅读更多

linear-gradient() - CSS（层叠样式表） | MDN
transform - CSS（层叠样式表） | MDN
animation - CSS（层叠样式表） | MDN
@keyframes - CSS（层叠样式表） | MDN
mask - CSS（层叠样式表） | MDN

Answer 2

css3 动画相关熟悉结合着用就可以，或者考虑下一些2d动画方案，比如 spritejs