css实现酷炫的边框流光（流动）旋转平移效果最近为了迎合ai科技感的热度，产品突发奇想想把后台系统整得酷炫一点，比如什么

最近为了迎合ai科技感的热度，产品突发奇想想把后台系统整得酷炫一点，比如什么接口请求的时候输入框带点酷炫的旋转效果，请求结果框移入内边框可旋转巴拉巴拉一堆“酷炫的效果”，然后就开始拿一堆酷炫的视屏效果企图让我实现她天马行空的想法，为了满足产品这个刁钻的需求，我把ai都问烂了，最终整理出了下面四种产品比较满意的流光效果（此处效果是从项目抽离出来的案例，具体的应用大家可可根据各自的场景自行使用，公司项目有保密要求我也不好展示，大家就凑活凑活，不好看也别嫌弃）

iShot_2025-04-24_01.29.38.mp4.gif

一、案例中使用到的参数

@property 声明：

这是一个较新的CSS特性，允许开发者明确定义自定义属性的类型和行为
它比普通的CSS变量（ --variable ）提供了更多的控制能力
这里关键的一句是：syntax: "";，如果你不声明他为角度类型的变量，那么 turn 这个单位将不能被 conic-gradient 在变化中读取。

@property --border-gradient-angle {
  syntax: '<angle>'; //指定此属性的值必须是角度类型
  inherits: true; // 表示此属性的值会从父元素继承
  initial-value: 0turn; //设置属性的初始值为0圈（即0度）, 1turn单位表示一个完整的圆（360度）
}

linear-gradient(线性渐变)：

由两种或多种颜色沿一条直线进行线性过渡的图像

//渐变轴为 90 度，从左到右渐变 
background: linear-gradient(90deg, #6631ff, #a431ff, #ee89ff, #31daff, #316bff, #44ffdd, #6631ff);

conic-gradient（锥形渐变）：

这是一种从中心点向外辐射的渐变，与线性渐变和径向渐变不同，锥形渐变是围绕一个中心点旋转的
官方解释：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient

    background: conic-gradient(
      // 指定渐变的起始角度--border-gradient-angle(这个值会在动画中变化,使得渐变可以随时间旋转)，并设置设置渐变的中心点在元素的正中心（水平50%，垂直50%）
      from var(--border-gradient-angle) at 50% 50%,
      // 渐变中使用的颜色(注意首尾颜色相同（#6631ff），确保渐变过渡平滑)
      #6631ff,
      #a431ff,
      #ee89ff,
      #31daff,
      #316bff,
      #44ffdd,
      #6631ff
    );

animation（动画效果）：

通过改变 --border-gradient-angle 的值（从0turn到1turn）,实现了渐变色彩的旋转效果

 animation: border-wave 5s linear infinite 0ms;

 @keyframes border-wave {
    0% {
      --border-gradient-angle: 0turn;
    }

    100% {
      --border-gradient-angle: 1turn;
    }
  }

filter

改变元素(通常是"img")的外观，添加模糊、阴影、颜色滤镜等效果
官方解释：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

//- 高斯模糊效果，使元素产生15像素的模糊效果
filter: blur(10px);

二、实现效果代码

2.1 旋转流光

代码原理很简单，先实现一个旋转的流光背景并设置一个内边距，

然后再在这个背景上叠加上元素，就可实现一个伪旋转边框的效果

2.2 平移流光

代码原理很简单，通过控制background-size实现一个平移的流光背景并设置一个内边距，然后再在这个背景上叠加上元素，就可实现一个伪边框的效果

2.3 内边框流光

为了实现内边框旋转的效果此处需要通过伪元素::before创建一个旋转边框

未命名.png

再通过 filter: blur(10px);为这个旋转边框设置一个模糊效果

未命名 2.png

然后再给通过父元素设置overflow: hidden;使超出的边框隐藏

未命名 3.png

2.4 外边框流光

为了不让 filter: blur(10px);影响到子元素的效果，所以需要通过伪元素::before给父元素创建一个模糊的旋转元素未命名 4.png

创建完成后覆盖上有背景色的子元素就可实现效果

css实现酷炫的边框流光（流动）旋转平移效果