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

代码语言：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% / 0.5), transparent) padding-box,
		radial-gradient(
			40% 50% at center 100%,
			hsl(var(--hue) var(--saturation) 72% / 0.15),
			transparent
		) padding-box,
		radial-gradient(
			80% 100% at center 120%,
			hsl(var(--hue) var(--saturation) 70% / 0.2),
			transparent
		) padding-box,
		linear-gradient(hsl(var(--hue) var(--saturation) 5%), hsl(var(--hue) var(--saturation) 4%)) padding-box;
	border: var(--border-width) solid transparent;
	border-radius: var(--border-radius);
	transition: background var(--transition) opacity var(--transition);
/*	opacity: 0;*/
}

button:is(:hover, :focus-visible) {
	--active: 1;
	outline: none;
}

.text {
	translate: 0 0;
	font-family: 'Geist Sans';
	font-weight: 80;
	letter-spacing: 0.01ch;
	background:
		linear-gradient(
			95deg,
			hsl(0 0% 90%) 15%,
			hsl(0 0% 50% / 1),
			hsl(0 0% 100% / 0.2),
			hsl(0 0% 80%),
			hsl(0 0% 90%) 85%);
	background-size: 500% 100%;
	background-position: 0 0;
	-webkit-background-clip: text;
	color: transparent;
	transition: background-position calc(var(--transition) * 6);
}

button:is(:hover, :focus-visible) .text {
	-webkit-animation: shimmer 1s both;
	        animation: shimmer 1s both;
}

@-webkit-keyframes shimmer {
	0% {
		background-position: 100% 0;
	}
}

@keyframes shimmer {
	0% {
		background-position: 100% 0;
	}
}

button .spark__container {
  position: absolute;
  inset: 0px;
	/* With a backdrop */
	overflow: hidden;
	/* Without a backdrop	*/
  /*mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  border: var(--border-width) solid transparent;*/
}

.glows {
	filter: blur(calc(var(--blur) * 1px));
	container-type: size;
	position: absolute;
	inset: 0;
}

button > .spark__container {
	container-type: size;
}

button .spark:nth-of-type(2) {
	rotate: 180deg;
	animation-direction: alternate-reverse;
}

button .spark {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0;
  overflow: visible;
  -webkit-mask: none;
          mask: none;
  -webkit-animation: slide calc(var(--speed) * 1s) ease-in-out infinite alternate;
          animation: slide calc(var(--speed) * 1s) ease-in-out infinite alternate;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

button:hover .spark {
	-webkit-animation-play-state: running;
	        animation-play-state: running;
}

button .spark:before {
  inset: -100%;
  background: conic-gradient(
    from calc(270deg - (var(--glow-spread) * 0.5)),
    var(--glow) 0,
    var(--glow) var(--glow-spread),
    transparent var(--glow-spread));
  translate: 0 0;
  transform: rotate(0deg);
  width: auto;
  -webkit-animation: spin calc(var(--speed) * 2s) infinite linear;
          animation: spin calc(var(--speed) * 2s) infinite linear;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

button:is(:hover, :focus-visible) .spark:before {
	-webkit-animation-play-state: running;
	        animation-play-state: running;
}

@-webkit-keyframes spin {
  0% {
    rotate: 0deg;
  }
  15%, 35% {
    rotate: 90deg;
  }
  65%, 85% {
    rotate: 270deg;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }
  15%, 35% {
    rotate: 90deg;
  }
  65%, 85% {
    rotate: 270deg;
  }
  100% {
    rotate: 360deg;
  }
}

@-webkit-keyframes slide {
  to {
    translate: calc(100cqw - 100%) 0;
  }
}

@keyframes slide {
  to {
    translate: calc(100cqw - 100%) 0;
  }
}

/* Overrides */
button .spark {
	background: transparent;
}
button .spark__container {
	border-radius: var(--border-radius);
	opacity: 0;
}

.spark {
	transition: opacity var(--transition);
	opacity: 0;
}

button:is(:hover, :focus-visible) .spark {
	opacity: 1;
}

button:is(:hover, :focus-visible) .spark__container:not(.spark__container--reveal) {
	-webkit-animation: reveal calc(var(--window) * 1s) both;
	        animation: reveal calc(var(--window) * 1s) both;
}

@-webkit-keyframes reveal {
	0%, 100% {
		opacity: 0;
	}
	20%, 80% {
		opacity: 1;
	}
}

@keyframes reveal {
	0%, 100% {
		opacity: 0;
	}
	20%, 80% {
		opacity: 1;
	}
}


[data-exploded] .spark,
[data-exploded] .spark__container:not(.spark__container--reveal),
[data-imploding] .spark,
[data-imploding] .spark__container:not(.spark__container--reveal),
[data-show-glows=true] .spark,
[data-show-glows=true] .spark__container:not(.spark__container--reveal) {
	opacity: 1;
}

[data-exploded] button .spark::before,
[data-exploded] button .spark,
[data-imploding] button .spark::before,
[data-imploding] button .spark,
[data-show-glows=true] button .spark::before,
[data-show-glows=true] button .spark {
	-webkit-animation-play-state: running;
	        animation-play-state: running;
}
[data-exploded] button:is(:hover, :focus-visible) .spark__con.........完整代码请登录后点击上方下载按钮下载查看