如何旋转锥形渐变？如何实现锥形渐变条无限圆周旋转？

要实现锥形渐变条的无限圆周旋转，用CSS动画配合conic-gradient就能轻松搞定，直接上可行方案：

实现代码 #

<div class="rotating-conic"></div>

.rotating-conic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* 模拟目标渐变效果，可根据实际需求调整色值和角度区间 */
  background: conic-gradient(#ff0000 0deg 30deg, #ffffff 30deg 60deg, #0000ff 60deg 90deg, #ffffff 90deg 120deg);
  /* 绑定旋转动画 */
  animation: rotateConic 2s linear infinite;
}

/* 定义旋转动画规则 */
@keyframes rotateConic {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

关键说明 #

• conic-gradient负责创建锥形渐变，你可以修改色值、角度区间来匹配你的渐变样式
• 动画通过transform: rotate()实现0到360度的完整旋转，linear保证匀速转动，infinite让动画无限循环
• 默认transform-origin为元素中心，刚好对应锥形渐变的圆心，无需额外调整；如果布局特殊，可手动设置transform-origin: center center确保旋转中心正确

内容的提问来源于stack exchange，提问作者tonitruum