按钮边框线条动画

实现效果：​​​​​​​

 html结构：

PS: mx、mb 是全局设置margin相关样式，自行调节

		<el-button
					v-for="item in list"
					:key="item.id"
					type="danger"
					plain
					@click="toLink(item.value)"
					class="mx-1 mb-2 btn"
				>
					<div class="border-custom"></div>
					<div class="border-custom"></div>
					<div class="border-custom"></div>
					<div class="border-custom"></div>
					{{ item.title }}
		</el-button>

css样式：

// 按钮样式
/deep/.btn {
		position: relative;
		width: fit-content;
		height: 32px;
		line-height: 13px;
		color: #ff5e79;
		background: #fff2f5;
		font-size: 16px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		border-radius: 2px;
		border: none;
		padding: 8px;
		overflow: hidden;
		&:hover {
			background: #ff5e79;
			color: #fff;
		}
		&:focus {
			background: #ff5e79;
			color: #fff;
		}
		&:active {
			background: #ff5e79;
			color: #fff;
		}
	}

    // 边框样式
	.border-custom {
		position: absolute;
		background: #ff5e79;
	}
    
	.border-custom:nth-child(1) {
		width: 100%;
		height: 2px;
		top: 0;
		left: -100%;
		animation: animate1 4s linear infinite;
		animation-delay: 0s;
	}
	.border-custom:nth-child(2) {
		width: 2px;
		height: 100%;
		top: -100%;
		right: 0;
		animation: animate2 4s linear infinite;
		animation-delay: 1s;
	}
	.border-custom:nth-child(3) {
		width: 100%;
		height: 2px;
		bottom: 0;
		right: -100%;
		animation: animate3 4s linear infinite;
		animation-delay: 2s;
	}
	.border-custom:nth-child(4) {
		width: 2px;
		height: 100%;
		bottom: -100%;
		left: 0;
		animation: animate4 4s linear infinite;
		animation-delay: 3s;
	}

    // 动画效果
	@keyframes animate1 {
		0% {
			left: -100%;
		}
		25% {
			left: 0;
		}
		50%,
		100% {
			left: 100%;
		}
	}
	@keyframes animate2 {
		0% {
			top: -100%;
		}
		25% {
			top: 0;
		}
		50%,
		100% {
			top: 100%;
		}
	}
	@keyframes animate3 {
		0% {
			right: -100%;
		}
		25% {
			right: 0;
		}
		50%,
		100% {
			right: 100%;
		}
	}
	@keyframes animate4 {
		0% {
			bottom: -100%;
		}
		25% {
			bottom: 0;
		}
		50%,
		100% {
			bottom: 100%;
		}
	}