css+div实现按钮边框走光动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+div实现按钮边框走光动画效果代码

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

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

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

  
<style>
*,
*:after,
*:before {
	box-sizing: border-box;
}
:root {
	--transition: 0.25s;
	--spark: 1.8s;
  --speed: 1.2s;
}

#style {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.5rem;
}

body {
	--active: 0;
	background: hsl(
		260
		calc(var(--active) * 97%)
		6%
	);
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family: system-ui, sans-serif;
	transition: background var(--transition);
	overflow: hidden;
}

button {
	--cut: 0.1em;
	--active: 0;
	--bg:
		radial-gradient(
			40% 50% at center 100%,
			hsl(270 0% 72% / 0.05),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(260 0% 70% / 0.1),
			transparent
		),
		hsl(260 0% 12%);
	background: var(--bg);
	font-size: 2rem;
	font-weight: 500;
	border: 0;
	cursor: pointer;
	padding: 0.9em 1.3em;
	display: grid;
  place-items: center;
	white-space: nowrap;
	border-radius: 100px;
	position: relative;
  overflow: hidden;
	box-shadow:
		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.1));
}

button:active {
  scale: 1;
}

label {
  color: hsl(0 0% 98%);
  position: absolute;
  top: 4rem;
  left: 1rem;
}
[type=checkbox] {
  position: absolute;
  top: 4rem;
  left: 7rem;
  translate: 0 25%;
  accent-color: hsl(280 80% 50%);
}

.spark {
	position: absolute;
	inset: 0;
	border-radius: 100px;
	rotate: 0deg;
	overflow: hidden;
	-webkit-mask: linear-gradient(white, transparent 50%);
	        mask: linear-gradient(white, transparent 50%);
	-webkit-animation: flip calc(var(--spark) * 2) infinite steps(2, end);
	        animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

#secret:checked ~ button .spark {
  overflow: visible;
  -webkit-mask: none;
          mask: none;
}

#secret:checked ~ button {
  overflow: visible;
}

#secret:checked ~ button .backdrop {
  opacity: 0.5;
}

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

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

.spark:before {
	content: "";
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
  inset: 0 auto auto 50%;
	z-index: -1;
	translate: -50% -15%;
	rotate: 0;
	transform: rotate(-90deg);
	opacity: calc((var(--active)) + 0.4);
  opacity: 1;
	background: conic-gradient(
		from 0deg,
		transparent 0 340deg,
		white 360deg
	);
	transition: opacity var(--transition);
	-webkit-animation: rotate var(--spark) linear infinite both;
	        animation: rotate var(--spark) linear infinite both;
}

.spark:after {
	content: "";
	position: absolute;
	inset: var(--cut);
	border-radius: 100px;
}

.backdrop {
	position: absolute;
	inset: var(--cut);
	background: var(--bg);
	border-radius: 100px;
	transition: background var(--transition) opacity var(--transition);
}

@-webkit-keyframes rotate {
	to {
		transform: rotate(90deg);
	}
}

@keyframes rotate {
	to {
		transform: rotate(90deg);
	}
}

button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {
	--active: 1;
}

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

.text {
	translate: 2% -6%;
	letter-spacing: 0.01ch;
	background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
	-webkit-background-clip: text;
	color: transparent;
	transition: background var(--transition);
}

#style:has([value=container]:checked) ~ button .spark__container,
#style:has([value=in-n-out]:checked) ~ button .spark__container{
  position: absolute;
  inset: 0px;
  container-type: size;
  overflow: visible;
}


#style:has([value=container]:checked) ~ #secret:checked ~ button .spark {
  background: hsl(10 80% 50% / 0.25);
}

#style:has([value=container]:checked) ~ button .spark {
  position.........完整代码请登录后点击上方下载按钮下载查看