如何利用 CSS 实现齿状圆环的 135 度渐隐效果？

实现齿状圆环渐隐效果

需求如下：一个带齿状圆环，左上角白色，其他部分白色渐变透明，右下角全消失（135 度渐变）。如何实现这种效果？

一个例子如下：
[图片]

解决方案

实现这种效果的关键是使用 transform 属性旋转圆环，同时保持渐变区域不变。

.gear {   width: 200px;   height: 200px;   background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0) 100%);   mask: radial-gradient(circle farthest-side, #fff 0%, transparent 100%);   animation: rotate 5s linear infinite; }  @keyframes rotate {   from {     transform: rotate(0);   }   to {     transform: rotate(360deg);   } }

• background: linear-gradient() 创建了一个从左上角到右下角的渐变。
• mask: radial-gradient() 创建了一个从左上角到右下角的透明遮罩。
• animation: rotate() 旋转圆环。

更多资源

• [linear-gradient() – css（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient)
• [transform – CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
• [animation – CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation)
• [mask – CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask)