实现齿状圆环渐隐效果

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

一个例子如下：
[图片]

解决方案

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

实现这种效果的关键是使用 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)