技术问询：实现两类圆形旋转渐变效果及完善相关CSS代码

没问题，这两个圆形视觉效果我帮你完善好了，直接看代码和解释就能上手：

1. 实心圆沿外圆边框旋转 + 渐变外边框 #

这个效果需要让一个小圆沿着外圆的边框边缘做环绕运动，同时外圆带有渐变边框。我们用容器定位来实现更精准的控制：

HTML结构 #

<div class="circle-container">
  <div class="outer-circle"></div>
  <div class="rotating-dot"></div>
</div>

CSS代码 #

/* 容器：用来定位外圆和旋转小圆 */
.circle-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 330px;
  height: 330px;
}

/* 带渐变边框的外圆 */
.outer-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 用padding+background-clip实现渐变边框，比border-image更灵活 */
  padding: 35px;
  background: linear-gradient(45deg, #001b33, cyan, #001b33);
  background-clip: content-box;
}

/* 沿边框旋转的实心小圆 */
.rotating-dot {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: cyan;
  top: -30px; /* 让小圆中心对齐外圆顶部边框 */
  left: 50%;
  transform: translateX(-50%);
  /* 组合transform实现环绕旋转，同时保持小圆自身不旋转 */
  animation: orbit 4s linear infinite;
}

/* 环绕旋转动画 */
@keyframes orbit {
  from {
    transform: translateX(-50%) rotate(0deg) translateX(165px) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg) translateX(165px) rotate(-360deg);
  }
}

关键说明 #

• 外圆的渐变边框通过padding预留边框区域，再用background-clip: content-box让渐变只填充padding部分，完美模拟渐变边框效果；
• 小圆的环绕动画用两次rotate+translateX实现：先把小圆移到容器中心，旋转容器半径角度，再平移到外圆边缘，最后反向旋转保持小圆自身方向不变（如果需要小圆自转，去掉最后一个rotate(-360deg)即可）。

2. 静态外圆环 + 旋转渐变内实心圆 #

这个效果是外圆环保持不动，内部的实心圆带着渐变背景旋转，实现动态视觉效果：

HTML结构 #

<div class="static-outer-ring">
  <div class="rotating-inner-circle"></div>
</div>

CSS代码 #

/* 静态外圆环 */
.static-outer-ring {
  width: 330px;
  height: 330px;
  border: 35px solid #001b33;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* 用flex布局快速居中内圆 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 带渐变的旋转内圆 */
.rotating-inner-circle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  /* 自定义渐变方向和颜色，按需调整 */
  background: linear-gradient(45deg, cyan, #001b33, cyan);
  animation: rotate 4s linear infinite;
}

/* 基础旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

关键说明 #

• 外圆环直接用border实现静态效果，配合border-radius:50%变成圆形；
• 内圆的渐变背景会随着旋转动画一起转动，形成流动的渐变视觉，你可以修改linear-gradient的颜色和角度来调整效果。

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