gsap+svg实现鼠标悬浮文字霓虹灯跟随效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：gsap+svg实现鼠标悬浮文字霓虹灯跟随效果代码

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

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

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

  
  
<style>
:root {
  --text: #0652DD;
  --background: #003;
  --backgroundDarker: #002;
  --accent: #C4E538;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font: 400 100%/1.25 "Poppins", sans-serif;
  background-color: var(--backgroundDarker);
  padding: 20px;
}

div {
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--background);
}

.neon {
  width: 65vw;
  height: auto;
}
.neon__text {
  fill: none;
  stroke: var(--text);
  stroke-width: 2px;
  filter: url(#glow);
}
.neon__light {
  fill: var(--accent);
  fill: url(#gradient);
  mix-blend-mode: color-dodge;
}
.neon__circle {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .neon__circle {
    -webkit-animation: flicker ease-in-out 5s alternate infinite;
            animation: flicker ease-in-out 5s alternate infinite;
  }
}

@-webkit-keyframes flicker {
  0% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  23% {
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  38% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  41% {
    opacity: 1;
  }
  77% {
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  79% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  23% {
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  38% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  41% {
    opacity: 1;
  }
  77% {
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  79% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
</style>


  
  
</head>

<body>
  <div>
	<svg viewBox="-100 -100 896 408"xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="neon">
		<defs>
			<filter id="glow">
				<fegaussianblur class="blur" result="blur" stddeviation="3"></fegaussianblur>
				<femerge>
					<femergenode in="blur"></femergenode>
					<femergenode in="blur"></femergenode>
					<femergenode in="SourceGraphic"></femergenode>
				</femerge>
			</filter>

			<radialGradient id="gradient">
				<stop offset="0%" stop-color="var(--accent)" stop-opacity=".975" />
				<stop offset="15%" stop-color="var(--accent)" stop-opacity=".675" />
				<stop offset="95%" stop-color="transparent" />
			</radialGradient>
		</defs>

		<g class="neon__text">
			<path d="M190.293,169.822L190.293,88.633C190.293,73.589 186.571,62.19 179.127,54.436C171.683,46.682 161.369,42.804 148.187,42.804C139.657,42.804 132.058,44.472 125.389,47.806C118.72,51.14 112.672,56.064 107.244,62.578C103.987,56.22 99.373,51.334 93.402,47.922C87.431,44.51 80.336,42.804 72.116,42.804C67.619,42.804 63.547,43.347 59.903,44.433C56.258,45.518 52.963,46.992 50.016,48.853C47.069,50.714 44.394,52.846 41.99,55.25C39.586,57.654 37.376,60.174 35.36,62.811L35.36,45.131L0,45.131L0,169.822L35.36,169.822L35.36,100.265C35.36,91.89 37.26,85.57 41.06,81.305C44.859,77.04 50.094,74.908 56.762,74.908C63.431,74.908 68.549,77.04 72.116,81.305C75.683,85.57 77.467,91.89 77.467,100.265L77.467,169.822L112.827,169.822L112.827,100.265C112.827,91.89 114.727,85.57 118.526,81.305C122.326,77.04 127.56,74.908 134.229,74.908C140.898,74.908 146.016,77.04 149.583,81.305C153.15,85.57 154.933,91.89 154.933,100.265L154.933,169.822L190.293,169.822Z"/>
			<path d="M328.244,169.822L328.244,97.473C328.244,80.568 323.824,67.386 314.984,57.925C306.144,48.465 292.031,43.735 272.645,43.735C262.099,43.735 253.104,44.665 245.66,46.526C238.216,48.388 231.082,50.791 224.258,53.738L233.098,80.723C238.836,78.552 244.303,76.885 249.498,75.722C254.694,74.559 260.703,73.977 267.527,73.977C276.367,73.977 283.036,75.916 287.534,79.793C292.031,83.67 294.28,89.331 294.28,96.775L294.28,98.869C289.783,97.318 285.169,96.077 280.438,95.147C275.708,94.216 270.164,93.751 263.805,93.751C256.361,93.751 249.576,94.565 243.45,96.194C237.324,97.822 232.051,100.265 227.631,103.521C223.211,106.778 219.76,110.888 217.279,115.851C214.797,120.814 213.557,126.707 213.557,133.531L213.557,133.996C213.557,140.2 214.681,145.667 216.93,150.397C219.179,155.127 222.242,159.121 226.119,162.377C229.996,165.634 234.532,168.077 239.728,169.705C244.923,171.334 250.468,172.148 256.361,172.148C265.046,172.148 272.413,170.713 278.461,167.844C284.51,164.975 289.705,161.137 294.047,156.329L294.047,169.822L328.244,169.822ZM294.745,125.854C294.745,132.368 292.225,137.641 287.185,141.673C282.144,145.705 275.437,147.722 267.062,147.722C261.324,147.722 256.671,146.403 253.104,143.767C249.537,141.13 247.754,137.408 247.754,132.601L247.754,132.135C247.754,126.552 2.........完整代码请登录后点击上方下载按钮下载查看