流动的边框用css怎么实现
很简单，纯css代码就能实现
彩色的流动边框
.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;-webkit-animation: bg-spin 3s linear infinite;animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {to {--border-angle: 1turn;}
}
@keyframes bg-spin {to {--border-angle: 1turn;}
}
.box:hover {-webkit-animation-play-state: paused;animation-play-state: paused;
}@property --border-angle {syntax: "<angle>";inherits: true;initial-value: 0turn;
}源码下载 预览效果