gsap实现鼠标悬停复古故障闪烁导航按钮代码-html代码-BFW代码库

gsap实现鼠标悬停复古故障闪烁导航按钮代码

代码语言：html

所属分类：悬停

代码描述：gsap实现鼠标悬停复古故障闪烁导航按钮代码

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

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

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

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap");
html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #0f0b0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Kode Mono", serif;
  justify-content: center;
}

h1 {
  background-color: #f55a6b;
  display: flex;
  justify-content: center;
  font-size: 20px;
  padding: 3px 7px;
  margin-bottom: 10px;
}

nav {
  display: flex;
  flex-direction: column;
}

text {
  fill: #f55a6b;
  font-size: 24px;
}
text.blue {
  fill: #5accf5;
}
</style>


  
  
</head>

<body translate="no">
  <h1>Glitchy Navigation with GSAP</h1>
<nav id="nav-1">
  <a href="#!">
    <svg width="350px" height="50px" viewBox="0 0 350 50">
      <defs>
        <filter id="displace" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
          <feFlood flood-color="#8888FF" y="0%" height="5%" result="s0" />
          <feFlood flood-color="#888800" y="5%" height="5%" result="s1" />
          <feFlood flood-color="#8888FF" y="10%" height="5%" result="s2" />
          <feFlood flood-color="#888800" y="15%" height="5%" result="s3" />
          <feFlood flood-color="#8888FF" y="20%" height="5%" result="s4" />
          <feFlood flood-color="#888800" y="25%" height="5%" result="s5" />
          <feFlood flood-color="#8888FF" y="30%" height="5%" result="s6" />
          <feFlood flood-color="#888800" y="35%" height="5%" result="s7" />
          <feFlood flood-color="#8888FF" y="40%" height="5%" result="s8" />
          <feFlood flood-color="#888800" y="45%" height="5%" result="s9" />
          <feFlood flood-color="#8888FF" y="50%" height="5%" result=&quo.........完整代码请登录后点击上方下载按钮下载查看