很简单，纯css代码就能实现
彩色的流动边框文章来源：https://www.toymoban.com/news/detail-824201.html
.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;
}源码下载 预览效果文章来源地址https://www.toymoban.com/news/detail-824201.html
到了这里，关于流动的边框用css怎么实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
