js+css实现可修改参数的边框发光走动悬浮按钮特效代码-html代码-BFW代码库

js+css实现可修改参数的边框发光走动悬浮按钮特效代码

代码语言：html

所属分类：悬停

代码描述：js+css实现可修改参数的边框发光走动悬浮按钮特效代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
@font-face {
  font-family: "Geist Sans";
  src: url("//repo.bfw.wiki/bfwrepo/font/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
	box-sizing: border-box;
}
:root {
	--saturation: 20%;
	--transition: 0.15s;
  --glow: hsl(var(--hue, 150) 80% 70% / var(--alpha, 1));
	--border-radius: calc(var(--radius) * 1px);
	--border-width: calc(var(--thickness) * 1px);
	--active: 0;
	--glow-spread: calc(var(--spread) * 1deg);
}

body {
	background: hsl(260 0% 0%);
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family: 'Geist Sans', arial, system-ui, sans-serif;
	overflow: hidden;
}

button {
	--bg:
		radial-gradient(
			40% 50% at center 100%,
			hsl(var(--hue) var(--saturation) 72% / 0.15),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(var(--hue) var(--saturation) 70% / 0.2),
			transparent
		),
		hsl(260 0% 2%);
	background: var(--bg);
	font-size: 2rem;
	font-family: 'Geist Sans';
	font-weight: 500;
	cursor: pointer;
	padding: 0.9em 2em;
	min-width: 280px;
	display: grid;
	border: 0;
  place-items: center;
	white-space: nowrap;
	border-radius: var(--border-radius);
	position: relative;
	box-shadow:
	  0 0.025em 0.4em -0.02em hsl(0 0% 100% / 0.25),
		0 0.05em 0 0 hsl(260 0% 50%) inset,
		0 -0.05em 0 0 hsl(260 0% 0%) inset;
	transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
	scale: calc(1 + (var(--active) * 0.025));
}

/* Feint border */
button::before {
	--saturation: 90%;
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid hsl(var(--hue) var(--saturation) 80% / 0.3);
	border-radius: var(--border-radius);
	pointer-events: none;
}

button:active {
  scale: 1;
}

@-webkit-keyframes flip {
	to {
		rotate: 360deg;
	}
}

@keyframes flip {
	to {
		rotate: 360deg;
	}
}

.spark:before {
	content: "";
	position: absolute;
}

/* Purely to decorate the use of CQ elements sliding along */
.spark:after {
/*	background: red;*/
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Optional backdrop – For some reason, if you go with the mask-composite, you lose the glow... */
.backdrop {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(transparent 5%, hsl(0 0% 0% / .........完整代码请登录后点击上方下载按钮下载查看