css实现彩色边框按钮悬浮流动走光动画效果代码

代码语言:html

所属分类:悬停

代码描述:css实现彩色边框按钮悬浮流动走光动画效果代码

代码标签: css 彩色 边框 按钮 悬浮 流动 走光 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>

    <meta charset="UTF-8">

<style>
@property --d {
	syntax:'<angle>';
	inherits:true;
	initial-value:0deg
}
button {
	width:200px;
	aspect-ratio:1;
	font-size:30px;
	color:#fff;
	background:0;
	border:0;
	border-radius:20px;
	position:relative;
	z-index:0;
	transition:.3s;
	cursor:pointer
}
button:before {
	content:"";
	position:absolute;
	inset:-8px;
	padding:8px;
	border-radius:28px;
	background:conic-gradient(from var(--d,0deg),#ff53bb,#0000 30deg 120deg,#00f8d3 150deg 180deg,#0000 210deg 300deg,#ff53bb 330deg);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask-composite:intersect
}
button:after {
	content:"";.........完整代码请登录后点击上方下载按钮下载查看

网友评论0