gsap+svg实现炫酷按钮悬浮边缘走光动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：gsap+svg实现炫酷按钮悬浮边缘走光动画效果代码

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

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

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

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap'>
  
<style>
.generate-button {
  --generate-button-star-1-opacity: .25;
  --generate-button-star-1-scale: 1;
  --generate-button-star-2-opacity: 1;
  --generate-button-star-2-scale: 1;
  --generate-button-star-3-opacity: .5;
  --generate-button-star-3-scale: 1;
  --generate-button-dots-opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  border: none;
  padding: 16px 24px 16px 20px;
  border-radius: 29px;
  margin: 0;
  background-color: #1D1D1D;
  color: #616161;
  min-width: 192px;
  display: flex;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
  transform: scale(var(--generate-button-scale, 1)) translateZ(0);
  box-shadow: 0px 0px 120px var(--generate-button-shadow-wide, transparent), 0px 4px 12px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1), inset 0px 1px 1px var(--generate-button-shadow-inset, rgba(255, 255, 255, 0.04)), 0 0 0 var(--generate-button-shadow-outline, 0px) rgba(109, 68, 244, 0.4);
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.generate-button:before {
  content: "";
  display: block;
  position: absolute;
  right: 20%;
  height: 20px;
  left: 20%;
  bottom: -10px;
  background: #D3B3FF;
  filter: blur(12.5px);
  z-index: 2;
  -webkit-clip-path: inset(-200% -30% 10px -30% round 29px);
          clip-path: inset(-200% -30% 10px -30% round 29px);
  opacity: 0;
  transition: opacity 0.4s;
  transform: translateZ(0);
}
.generate-button span {
  position: relative;
  z-index: 1;
  font-family: "Poppins", Arial;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.005em;
  display: block;
}
.generate-button span:before {
  content: "";
  background-image: linear-gradient(to right, transparent, #1D1D1D);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.4s;
}
.generate-button .stroke {
  mix-blend-mode: hard-light;
}
.generate-button .stroke svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 0.75px;
  stroke: #E2D9FF;
  stroke-dasharray: 1.5 14;
  stroke-dashoffset: 22;
  opacity: 0;
}
.generate-button .stroke svg:nth-child(2) {
  stroke-width: 1px;
  stroke-opacity: 0.5;
  filter: blur(3px);
}
.generate-button svg {
  display: block;
  overflow: visible;
  pointer-events: none;
}
.generate-button svg.dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  fill: #D3B2FF;
  opacity: var(--generate-button-dots-opacity);
}
.generate-button svg.icon {
  width: 24px;
  height: 26px;
  margin-right: 12px;
  fill: currentColor;
}
.generate-button svg.icon path:nth-child(1) {
  opacity: var(--generate-button-star-1-opacity);
  transform: scale(var(--generate-button-star-1-scale)) translateZ(0);
  transform-origin: 25% 14.58%;
}
.generate-button svg.icon path:nth-child(2) {
  opacity: var(--generate-button-star-2-opacity);
  transform: scale(var(--generate-button-star-2-scale)) translateZ(0);
  transform-origin: 60.42% 50%;
}
.generate-button svg.icon path:nth-child(3) {
  opacity: var(--generate-button-star-3-opacity);
  transform: scale(var(--generate-button-star-3-scale)) translateZ(0);
  transform-origin: 25% 85.42%;
}
.generate-button:hover {
  --generate-button-scale: 1.1;
  --generate-button-shadow-wide: rgba(208, 173, 255, 0.4);
  --generate-button-shadow-inset: rgba(255, 255, 255, 0.35);
  --generate-button-shadow-outline: 3px;
  color: #fff;
  background-color: #6D44F4;
}
.generate-button:hover .stroke svg {
  -webkit-animation: stroke 2s linear infinite;
          animation: stroke 2s linear infinite;
}
.generate-button:hover:before {
  opacity: 1;
}
.generate-button:hover span:before {
  opacity: 0;
}
.generate-button:hover:active {
  --generate-button-scale: 1.05;
}

@-webkit-keyframes stroke {
  0% {
    opacity: 0;
  }
  25%, 75% {
    opacity: 1;
  }
  95%, 100% {
    stroke-dashoffset: 6;
    opacity: 0;
  }
}

@keyframes stroke {
  0% {
    opacity: 0;
  }
  25%, 75% {
    opacity: 1;
  }
  95%, 100% {
    stroke-dashoffset: 6;
    opacity: 0;
  }
}
body {
  transition: background-color 0.3s;
  background-color: #111111;
}
body:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("//repo.bfw.wiki/bfwrepo/image/5dd653c337706.png");
  background-repeat: repeat;
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}
body:has(.generate-button:hover) {
  background-color: #10042E;
}
body:after {
  transition: opacity 0.3s;
}
body:hover :after {
  opacity: 0.25;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Inter", Arial;
  justify-content: center;
  align-items: center;
}
body .twitter {
  position: fixed;
  display: block;
  right: 12px;
  bottom: 12px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
</style>


  
</head>

<body >
  <button class="generate-button">
  <svg class="icon" viewBox="0 0 24 26">
    <path
      d="M5.16515 2.62145L5.8075 0.999247C5.83876 0.919722 5.9154 0.866699 6.00112 0.866699C6.08683 0.866699 6.16347 0.919722 6.19473 0.999247L6.83708 2.62145L8.44145 3.27094C8.5201 3.30254 8.57254 3.38003 8.57254 3.4667C8.57254 3.55337 8.5201 3.63085 8.44145 3.66246L6.83708 4.31195L6.19473 5.93415C6.16347 6.0147 6.08683 6.0667 6.00112 6.0667C5.9154 6.0667 5.83876 6.0147 5.8075 5.93415L5.16515 4.31195L3.56078 3.66246C3.48112 3.63085 3.42969 3.55337 3.42969 3.4667C3.42969 3.38003 3.48112 3.30254 3.56078 3.27094L5.16515 2.62145Z"
    />
    <path
      d="M11.2362 9.43967C11.5502 9.30067 11.8015 9.05025 11.9405 8.73617L13.5494 5.11725C13.7169 4.74204 14.0887 4.5 14.5 4.5C14.9112 4.5 15.2839 4.74204 15.4506 5.11725L17.0603 8.73617C17.1985 9.05025 17.4497 9.3015 17.7638 9.43967L21.3827 11.0494C21.7579 11.2161 22 11.5887 22 12C22 12.4112 21.7579 12.7831 21.3827 12.9506L17.7638 14.5595C17.4497 14.6985 17.1993 14.9497 17.0603 15.2638L15.4506 18.8827C15.2839 19.2579 14.9112 19.5 14.5 19.5C14.0887 19.5 13.7169 19.2579 13.5494 18.8827L11.9405 15.2638C11.8015 14.9497 11.5502 14.6985 11.2362 14.5595L7.61725 12.9506C7.24204 12.7831 7 12.4112 7 12C7 11.5887 7.24204 11.2161 7.61725 11.0494L11.2362 9.43967Z"
    />
    <path
    .........完整代码请登录后点击上方下载按钮下载查看