CSS - CSS变量+重复圆锥渐变：轻松制作旋转边框动画！
<!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>