渐变边框+边框旋转动画

body {
	height: 100vh;
	background: #223;
	display: grid;
	place-items: center;
}
.box {
	--border-size: 3px;
	--border-angle: 0turn;
	width: 60vmin;
	height: 50vmin;
	background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
	background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
	background-position: center center;
	background-repeat: no-repeat;
	animation: bg-spin 3s linear infinite;
}
@keyframes bg-spin {
	to {
		--border-angle: 1turn;
	}
}
.box:hover {
	animation-play-state: paused;
}
@property --border-angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0turn;
}