css+js实现弯曲下划线导航条效果代码-html代码-BFW代码库

css+js实现弯曲下划线导航条效果代码

代码语言：html

代码描述：css+js实现弯曲下划线导航条效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html,
body {
  height: 100%;
  overflow: hidden;
}

:root {
  font-size: 2vw;
  font-family: Itim, sans-serif;
}

body {
  display: grid;
  place-content: center;
  background-color: #025;
}

nav {
  position: relative;
  color: #aef;
}

ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  padding: 0 1.25rem;
}

svg {
  color: #ff2;
  overflow: visible;
}

path {
  --factor: 1;
  transition: all calc(0.4s * var(--factor)) ease-in-out;
}

a {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  font-size: 2.75rem;
  line-height: 1.25;
  color: inherit;
  transition: color 0.3s ease-in-out;
}

a.active {
  color: #ff2;
}
</style>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap&text=homeblgwrkaut" rel="stylesheet">

</head>

<body >


<nav>
  <ul>
    <li>
      <a class="active" href="#home">Home</a>
    </li>
    <li>
      <a href="#home">Blog</a>
    </li>
    <li>
      <a href="#home">Work</a>
    </li>
    <li>
      <a href="#home">About</a>
    </li>
  </ul>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 977.2 18.2">
    <path class="squiggle" fill="none" stroke="currentColor" stroke-dashoffset="1" stroke-miterlimit="10" stroke.........完整代码请登录后点击上方下载按钮下载查看