如何给带渐变border的div添加滚动到可见区域时触发的边框自转动画

你原有代码中的border-image属性不支持渐变角度的过渡动画，因此需要调整渐变边框的实现方式，再配合滚动监听完成需求，以下是两种可直接使用的实现方案：

方案1：伪元素实现（兼容性最好，全主流浏览器支持） #

适合页面背景为纯色的场景，无兼容性问题。

调整后的CSS代码 #

.border-gradient {
  position: relative;
  height: 230px;
  width: 100%;
  /* 边框厚度，可自行修改 */
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
}
/* 渐变背景层，负责旋转动画 */
.border-gradient::before {
  content: '';
  position: absolute;
  /* 尺寸放大避免旋转时露出空白 */
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  background: linear-gradient(190deg,  rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
  z-index: -1;
}
/* 内容遮罩层，盖住中间非边框区域 */
.border-gradient::after {
  content: '';
  position: absolute;
  /* 偏移值等于边框厚度 */
  inset: 5px;
  /* 替换为你的页面实际背景色 */
  background: #fff;
  z-index: -1;
}
/* 旋转动画定义 */
@keyframes borderRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 元素进入视口后激活动画的类 */
.border-gradient.animate::before {
  animation: borderRotate 2s linear infinite;
}

滚动监听JS代码 #

使用IntersectionObserver实现高性能的滚动监听，不会造成页面卡顿：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      // 进入可视区添加动画类
      entry.target.classList.add('animate')
    } else {
      // 离开可视区移除动画，不需要可删除该行
      entry.target.classList.remove('animate')
    }
  })
}, {
  threshold: 0.1 // 元素露出10%时触发，可自行调整
})

// 绑定目标元素
const targetEl = document.querySelector('.border-gradient')
if(targetEl) observer.observe(targetEl)

HTML代码不需要做任何修改，保持原有结构即可。

方案2：CSS变量实现（代码更简洁） #

适合背景不是纯色的场景，仅现代浏览器支持（Chrome 85+、Safari 15.4+、Firefox 103+）。

调整后的CSS代码 #

/* 定义可动画的角度变量 */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 190deg;
}
.border-gradient {
  height: 230px;
  width: 100%;
  box-sizing: border-box;
  border: 5px solid transparent;
  /* 两层背景分别对应内容区域和边框渐变 */
  background: 
    linear-gradient(#fff, #fff) content-box, /* 替换为你的内容背景 */
    linear-gradient(var(--angle),  rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)) border-box;
}
@keyframes borderRotate {
  to {
    --angle: calc(190deg + 360deg);
  }
}
.border-gradient.animate {
  animation: borderRotate 2s linear infinite;
}

JS代码和方案1完全一致，不需要修改。

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