可用CSS border-image配合@keyframes实现渐变边框顺时针旋转流动效果，核心是动画改变linear-gradient角度并设border-image-slice:1，兼容Chrome、Firefox、Safari、Edge。
直接用 CSS 的 border-image 配合 @keyframes 动画可以实现渐变边框的顺时针旋转流动效果，无需 JS，兼容性较好（Chrome、Firefox、Safari、Edge 均支持 border-image + animation）。
1. 用 border-image 搭配线性渐变创建动态边框
核心思路是：把一个带角度变化的线性渐变作为边框图像，再通过动画不断旋转这个渐变的角度，视觉上就形成“颜色在边框上顺时针流动”的效果。
- 不能直接对 border-color 动画（它不支持渐变），必须用
border-image - 渐变需设为
linear-gradient(to right, ...)，然后在动画中改变to right的角度（如to 45deg→to 90deg） - 配合
border-image-slice: 1确保渐变完整映射到边框上
2. 关键 CSS 写法示例
以下代码实现点击后触发 3s 顺时针流动动画（可循环）：
.rotating-border {
border: 4px solid transparent;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b) 1;
transition: border-image 0.3s;
}
.rotating-border.active {
animation: rotateGradient 3s linear infinite;
}
@keyframes rotateGradient {
0% {
border-image: linear-gradient(0deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b) 1;
}
100% {
border-image: linear-gradient(360deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b) 1;
}
}
⚠️ 注意：border-image 中的 1 是 border-image-slice 的简写，必须写，否则渐变不生效。
3. 点击控制（纯 CSS 或轻量 JS）
如果希望仅点击一次触发、不循环，可改用 JS 切换 class 并监听动画结束：
- 纯 CSS 方案：用
:active（按下时生效，松开即停） - 推荐 JS 方案：点击添加
active类，动画结束后自动移除（避免重复点击堆积动画）
const el = document.querySelector('.rotating-border');
el.addEventListener('click', () => {
el.classList.add('active');
el.addEventListener('animationend', () => {
el.classList.remove('active');
}, { once: true });
});
4. 兼容性与优化提示
- Safari 旧版本（border-image 动画支持不稳定，可加
-webkit-border-image前缀 - 若需更平滑流动，可增加关键帧数量（如每 30° 一帧），或改用
conic-gradient（但 border-image 不支持 conic，需用伪元素模拟） - 移动端点击需确保元素有
cursor: pointer和touch-action: manipulation提升响应
