CSS流光边框特效 - CSS | Roc's Blog = 一些記錄

就是做一个一条线在周围转啊转的效果

参考：
传送门 1
传送门 2
传送门 3
以上特效，f12 均可查看实现方式，甚至有的可以下载源码。
下面我把我做的边框流光特效实现贴出来，以便日后 ctrl CV

	<li v-for="(item,index) in indoorParams" :key="index">
	//其他代码。。。
	<div class="animate-border">
	<i></i>
	<i></i>
	</div>
	</li>

	<style lang="scss">
	ol li{
	/* border: 1px solid rgba(32,254,255,.3); */
	/* 宽高和相对定位是一定要给的，因为这会影响.animate-border 子元素的定位 */
	position: relative;
	width: 3rem;
	height: 5rem;
	overflow: hidden;
	/* 利用伪元素和两个 i 元素产生 4 条线 */
	.animate-border{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	&::before, &::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	}
	i {
	position: absolute;
	display: inline-block;
	height: 100%;
	width: 1px;
	}
	&::before{
	top: 0;
	left: -100%;
	background-image: linear-gradient(90deg,transparent,#03e9f4);
	/* name duration timing-function delay iteration-count diraction */
	animation: one 4s linear infinite;
	}
	i:nth-child(1){
	top: -100%;
	right: 0;
	background-image: linear-gradient(180deg,transparent,#03e9f4);
	animation: two 4s linear 1s infinite;
	}
	&::after{
	bottom: 0;
	right: -100%;
	background-image: linear-gradient(-90deg,transparent,#03e9f4);
	animation: three 4s linear 2s infinite;
	}
	i:nth-child(2){
	bottom: -100%;
	left: 0;
	background-image: linear-gradient(360deg,transparent,#03e9f4);
	animation: four 4s linear 3s infinite;
	}
	}
	}
	@keyframes one {
	0% {
	left: -100%;
	}
	50%, 100% {
	left: 100%;
	}
	}

	@keyframes two {
	0% {
	top: -100%;
	}
	50%, 100% {
	top: 100%;
	}
	}

	@keyframes three {
	0% {
	right: -100%;
	}
	50%, 100% {
	right: 100%;
	}
	}

	@keyframes four {
	0% {
	bottom: -100%;
	}
	50%, 100% {
	bottom: 100%;
	}
	}
	</style>

CSS