CSS - CSS变量+重复圆锥渐变：轻松制作旋转边框动画！
sh
实际原理：圆锥渐变
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆锥渐变</title><style>@property --a {/* 表示该属性的值应该是一个角度值，可以是度数（如45deg）或弧度（如0.785rad）。 */syntax: '<angle>';/* 表示该属性的初始值为0度。 */initial-value: 0deg;/* 表示该属性的值可以从父元素继承。 */inherits: true;}.yuan {/* background: conic-gradient(at 50% 50%, red, rgba(255, 0, 0, 0.253), yellow,rgba(255, 255, 0, 0.185)); */width: 200px;height: 200px;position: relative;/* }.yuan:hover { */animation: deg 4s linear infinite;background: repeating-conic-gradient(from var(--a), #00abf0 0%, #00abf0 5%, transparent 5%, transparent 40%, #00abf0 50%);;}.xin {background-color: #ffffff;width: 190px;height: 190px;position: absolute;left: 50%;top: 50%;margin-left: -95px;margin-top: -95px;}@keyframes deg {0% {--a: 0deg;}100% {--a: 360deg;}}</style>
</head><body><div class="yuan"><div class="xin"></div></div></body></html>