求助：为CSS旋转渐变圆形添加脉冲动画及代码优化

一、实现内部脉冲动画 #

你之前用scale实现脉冲未成功，核心原因是没给内部圆形（.circle::after）设置独立的缩放动画，或是动画参数配置不合理。直接给内部圆形添加基于scale的脉冲动画即可，transform属性不会继承，无需担心和父元素的旋转动画冲突：

1. 定义脉冲动画关键帧：

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

2. 给.circle::after绑定该动画：

.circle::after {
  /* 原有样式保留 */
  animation: pulse 1.5s ease-in-out infinite;
}

用ease-in-out让脉冲过渡更自然，时长和透明度参数可根据需求调整，和目标示例的视觉效果匹配。

二、代码优化建议 #

1. 用CSS自定义属性减少重复代码 #

把重复的渐变、尺寸、动画参数抽成变量，方便后续维护修改：

:root {
  --circle-size: 300px;
  --gradient: linear-gradient(#fb5dad, #55fb9f, #b97aff);
  --rotate-duration: 2s;
  --pulse-duration: 1.5s;
}

后续在需要的地方通过var(--变量名)引用即可。

2. 简化动画与选择器代码 #

• 将span的动画属性简写，和父元素保持一致，避免冗余：

.circle span {
  /* 原有样式保留 */
  animation: rotate-gradient var(--rotate-duration) linear infinite;
}

• 用CSS变量统一控制span的模糊值，替代逐个设置nth-child：

.circle span:nth-child(1) { --blur: 5px; }
.circle span:nth-child(2) { --blur: 10px; }
.circle span:nth-child(3) { --blur: 25px; }
.circle span:nth-child(4) { --blur: 50px; }

.circle span {
  filter: blur(var(--blur));
}

3. 优化内部圆形的尺寸写法 #

用calc简化.circle::after的尺寸计算，避免重复写固定值：

.circle::after {
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}

4. 语义化命名 #

将原动画名称my-animation改为rotate-gradient，更清晰表达动画作用。

修改后的完整代码 #

:root {
  --circle-size: 300px;
  --gradient: linear-gradient(#fb5dad, #55fb9f, #b97aff);
  --rotate-duration: 2s;
  --pulse-duration: 1.5s;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #050210;
}

.circle {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: var(--gradient);
  animation: rotate-gradient var(--rotate-duration) linear infinite;
}

@keyframes rotate-gradient {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.circle span {
  position: absolute;
  inset: 0; /* 替代width:100%;height:100%;top/left/right/bottom:0 */
  border-radius: 50%;
  background: var(--gradient);
  animation: rotate-gradient var(--rotate-duration) linear infinite;
  filter: blur(var(--blur));
}

.circle span:nth-child(1) { --blur: 5px; }
.circle span:nth-child(2) { --blur: 10px; }
.circle span:nth-child(3) { --blur: 25px; }
.circle span:nth-child(4) { --blur: 50px; }

.circle::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background: radial-gradient(black, rgb(11, 11, 88));
  border-radius: 50%;
  animation: pulse var(--pulse-duration) ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

<div class="circle">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

内容的提问来源于stack exchange，提问作者Central-Attack