使用css实现一个边框流动特效

效果图

html

<div class="item" v-for="i in 4" :key="i"></div>

scss

.item {
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(11 98 245 / 41%);
	position: relative;
	width: 200px;
	height: 100px;
	overflow: hidden; // 超出item部分隐藏
	margin-left: 20px;
	margin-top: 20px;

	&:before {
		content: "";
		position: absolute;
		width: 112%;
		height: 62%;
		background: rgb(255, 255, 255); // 渐变
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(0, 175, 237, 1) 100%);
		animation: rotate 5s linear infinite; // 秒数可以改变流动的快慢
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	&:after {
		content: "";
		position: absolute;
		background-color: rgb(48 76 102);
		inset: 2px; // inset是top: 2px;right: 2px;bottom: 2px;left: 2px; 的缩写,
		// inset越大,流动的线越宽(after去遮挡before元素)
		border-radius: 10px;
	}
}