将CSS Houdini发光边框动画重构为标准CSS（无需子元素）

以下是符合要求的标准CSS实现方案，无需修改HTML结构、不依赖JavaScript，同时移除了实验性的@property特性：

修改后的代码 #

CSS #

body {
  background: #000;
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.moving-border {
  width: 200px;
  height: 300px;
  position: relative;
  background: #111;
  padding: 4px;
}
.moving-border::before,
.moving-border::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: -1;
  background: linear-gradient(0deg, #032146, #C3F2FF, #b00);
  animation: rotate 10s linear infinite;
}
.moving-border::after {
  filter: blur(10px);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

HTML #

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

改动说明 #

1. 移除实验性特性：删掉原代码中属于CSS Houdini范畴的@property --angle声明，改用完全标准化的CSS语法。
2. 替换动画逻辑：将原通过修改渐变角度变量的方式，改为直接对伪元素应用transform: rotate()动画，通过旋转伪元素本身实现渐变环绕的视觉效果，与原效果完全一致。
3. 保留原有结构：仍使用::before和::after伪元素实现边框和模糊发光效果，无需新增HTML子元素或依赖JavaScript创建包装器。
4. 视觉效果一致：保留了原有的渐变色彩、模糊程度、动画时长和线性无限循环特性，最终呈现效果与原实验性实现无差异。

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