最近实现一个border围绕内容旋转的动画，效果如下：

实现原理比较简单，借助于css的clip-path属性，它的作用是裁剪元素形成新的可视化区域。详细请看官方文档 首先构建border和内容区域，border需借助after和before属性避免内容被剪切，后使用clip-path裁剪after和before，最后把各个方向裁剪部分做成动画即可。

实现代码如下：

<template>
	<div class="page">
		<div class="box">
			<div class="content"></div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped lang="scss">
	.page {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;
		.box {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200px;
			height: 200px;
			background: transparent;
			
			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				border: 5px solid #00FF00;
				box-sizing: border-box;
				clip-path: inset(0 0 195px 0);
				animation: clipBoderTop 5s linear infinite;
			}
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				border: 5px solid #00FF00;
				box-sizing: border-box;
				clip-path: inset(0 0 195px 0);
				animation: clipBoderBottom 5s linear infinite;
			}
			.content {
				left: 5px;
				top: 5px;
				width: 180px;
				height: 180px;
				background: #000FFF;
			}
		}
		
	}	
	
	@keyframes clipBoderTop {
		from {
			clip-path: inset(0 0 195px 0);
		}
		25% {
			clip-path: inset(0 0 0 195px);
		}
		50% {
			clip-path: inset(195px 0 0 0);
		}
		75% {
			clip-path: inset(0 195px 0 0);
		}
		to {
			clip-path: inset(0 0 195px 0);
		}
	}
	
	@keyframes clipBoderBottom {
		from {
			clip-path: inset(195px 0 0 0);
		}
		25% {
			
			clip-path: inset(0 195px 0 0);
		}
		50% {
			clip-path: inset(0 0 195px 0);
		}
		75% {
			clip-path: inset(0 0 0 195px);
		}
		to {
			clip-path: inset(198px 0 0 0);
		}
	}
</style>