js+css实现可修改参数的边框发光走动悬浮按钮特效代码
代码语言:html
所属分类:悬停
代码描述:js+css实现可修改参数的边框发光走动悬浮按钮特效代码
代码标签: 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: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0