实现齿状圆环渐隐效果
需求如下：一个带齿状圆环，左上角白色，其他部分白色渐变透明，右下角全消失（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)
