實現一個矩形的旋轉流光邊框效果。
需要使用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);