【CSS案例】流水灯边框

转载自：B站：纯CSS写一个动态流水灯边框的效果

【CSS案例】流水灯边框

HTML代码

<div class="box">流水灯边框</div>

CSS代码

body {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	min-height: 100vh;
	background-color: #000;
}
.box {
	padding: 15vmin 10vmin;
	background-color: #fff;
	border-radius: 5vmin;
	background-repeat: 5vmin;
	color: #66ddf7;
	font-size: 8vmin;
	position: relative;
	overflow: hidden;
	z-index: 0;  /* 为内部子元素开启层级开关 */
}
.box::before {
	content: '';
	width: 200%;
	height: 200%;
	background-color: #22292f;
	position: absolute;
	left: -50%;
	top: -50%;
	background-image: conic-gradient(transparent, #66ddf7, transparent 30%);
	z-index: -2;
	animation: rotate 5s linear infinite;
}
@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}
.box::after {
	content: '';
	position: absolute;
	inset: 1vmin;
	background-color: #000;
	border-radius: 4vmin;
	z-index: -1;
}

流光按钮

HTML代码

<a href="javascript:;">BUTTON</a>

CSS代码

a {
	width: 200px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	box-sizing: border-box;
	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	background-size: 400%;
	border-radius: 30px;
	z-index: 1;
}
a:hover {
	animation: animate 8s linear infinite;
}
@keyframes animate {
	from {
		background-position: 0%;
	}
	to {
		background-position: 400%;
	}
}
a::before {
	content: '';
	position: absolute;
	inset: -5px;
	z-index: -1;
	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	background-size: 400%;
	border-radius: 40px;
	opacity: 0;
}
a:hover::before {
	filter: blur(20px);
	opacity: 1;
	animation: animate 8s linear infinite;
}