如何实现带透明间隙的圆形渐变边框旋转动画？

问题分析 #

你当前的实现存在两个核心问题：

1. 选择器不匹配：SCSS里写的#home-page和HTML中的id="homepage"不一致，会导致样式无法作用到目标元素；
2. 伪元素用完整的线性渐变背景，无法留出透明间隙，没法实现“两段渐变边框+透明间隔”的效果。

要实现两段渐变边框+透明间隙+旋转动画，需要调整伪元素的背景生成方式，配合渐变裁剪或遮罩来控制显示区域。

解决方案 #

我们可以通过锥形渐变配合颜色节点定义，直接生成带透明间隙的渐变边框，再给伪元素添加独立旋转动画，主图标保持在顶层遮挡中心区域。

修改后的完整代码 #

SCSS 代码

// 定义变量
$medium-red: #c92a2a;
$beige: #f0e6d6;
$light-red: #faa307;
$border-width: 3px;
$gap-angle: 120deg; // 透明间隙的角度，可按需调整

#homepage {
  position: relative;

  i {
    position: absolute;
    color: $medium-red;
    top: 50%;
    left: 50%;
    font-size: 400px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; // 确保图标在顶层，遮挡伪元素中心
  }

  i::after {
    content: "";
    position: absolute;
    top: -$border-width;
    left: -$border-width;
    right: -$border-width;
    bottom: -$border-width;
    border-radius: 50%;
    z-index: -1;
    // 用锥形渐变定义两段渐变区域，中间留透明间隙
    background: conic-gradient(
      $beige 0deg, 
      $light-red 60deg, 
      transparent 60deg, 
      transparent calc(360deg - $gap-angle), 
      $light-red calc(360deg - $gap-angle), 
      $beige 360deg
    );
    // 伪元素独立旋转，避免图标跟着转动
    animation: spin 4s linear infinite;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

HTML 代码

<div id="homepage">
    <i class="fa-solid fa-circle"></i> <!-- 替换为实际的Font Awesome类名 -->
</div>

关键说明 #

• 选择器统一：将SCSS中的#home-page修正为#homepage，匹配HTML的id属性；
• 锥形渐变生成间隙：通过conic-gradient的颜色节点，明确划分渐变显示区域和透明间隙区域；
• 独立动画：伪元素单独设置旋转动画，主图标仅做居中定位，避免图标跟随旋转；
• 层级控制：主图标设置z-index:1，确保遮挡伪元素的中心区域，只显示外层的边框部分。

灵活调整参数 #

• 修改$gap-angle可以控制透明间隙的大小；
• 调整渐变的颜色节点角度（如60deg）可以改变渐变段的长度；
• 修改动画时长（4s）可以控制旋转速度。

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