如何让渐变背景旋转而非元素？渐变边框动画问题求助

问题出在你给伪元素直接添加了transform: rotate，导致整个伪元素（包括遮罩层）同步旋转，视觉上呈现盒子整体转动的效果，而非渐变背景流动。

修正思路 #

通过CSS变量控制渐变的角度，仅对渐变角度做动画更新，而非旋转整个元素。

修正后代码 #

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.gradient-border {
  position: relative;
  width: 500px;
  height: 500px;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px; 
  border: 7px solid transparent;
  background: linear-gradient(var(--angle), #4158D0, #C850C0, #FFCC70) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: rotate-gradient linear 5s infinite;
}

@keyframes rotate-gradient {
  100% { 
    --angle: 360deg;
  }
}

<div class="gradient-border"></div>

关键修改点 #

• @property --angle：注册CSS变量，让角度变量支持平滑动画（Chrome、Edge、Firefox等现代浏览器均支持）
• 渐变角度绑定变量：将原固定的45deg替换为var(--angle)，让渐变角度可动态修改
• 动画目标调整：动画不再旋转元素，而是将--angle从初始的0deg更新到360deg，实现渐变背景的流动旋转效果

这样修改后，盒子本身保持静止，只有渐变边框的颜色会沿着边框循环流动，符合你的预期。

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