如何利用 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)

以上就是如何利用 CSS 实现齿状圆环的 135 度渐隐效果？的详细内容，更多请关注其它相关文章！