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