[css]旋转流光效果

实现一个矩形的旋转流光边框效果。
需要使用css属性梯度渐变：链接: conic-gradient，他指的是圆锥形变化的梯度。

// html<div class="demo"></div>

// css
body {width: 100%;height: 100%;background-color: black;
}.demo {width: 400px;height: 200px;background-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, transparent, #70ffaf 14%, transparent 17%);background-size: contain;
}@property --border-gradient-angle {syntax: "<angle>";inherits: true;initial-value: 0turn;
}

上面的代码，指的是从第 0 转位置（中间垂直向上）开始，在中心点位置放置渐变，效果如下：

给上面效果加上动画：

.demo {width: 400px;height: 200px;background-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, transparent, #70ffaf 14%, transparent 17%);background-size: contain;animation: buttonBorderSpin 9s linear infinite 0ms;
}
@keyframes buttonBorderSpin {0% {--border-gradient-angle: 0turn;}100% {--border-gradient-angle: 1turn;}
}
@property --border-gradient-angle {syntax: "<angle>";inherits: true;initial-value: 0turn;
}

添加上述代码之后，可以获得一个线性旋转，旋转一整周（1turn）并周期循环的动画。

之后对这个div进行遮挡，在其中添加一个div：

 <div class="demo"><div class="demo-content">旋转流光</div></div>

.demo {...padding: 1px;
}.demo-content {width: 100%;height: 100%;background-color: black;color: white;}

遮挡后即可看到绕边框一周的旋转流光效果。

改变旋转点还可以获得平移流光效果

background-image: conic-gradient(from var(--border-gradient-angle) at 30% -30%, transparent 25%, #70ffaf 75%, transparent);