svg+css实现图标滚动菜单效果代码-html代码-BFW代码库

svg+css实现图标滚动菜单效果代码

代码语言：html

代码描述：svg+css实现图标滚动菜单效果代码

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

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

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

<style>
body {
  height: 100vh;
  max-width: 100%;
  overflow: clip;
  margin: 0;
  display: grid;
  place-items: center;
}

.container {
  position: relative;
}

nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  a {
    text-decoration: none;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    color: #455a64;
    padding: 0.5rem 1rem;
    svg {
      pointer-events: none;
      width: 1.2em;
      fill: currentColor;
    }
    &:hover,
    &:focus {
      color: #1e88e5;
    }
  }
}

#duplicate-nav {
  position: absolute;
  inset: 0;
  background: #1e88e5;
  pointer-events: none;

  clip-path: inset(0 77% 0 0% round 1rem);
  transition: clip-path 0.2s;

  a {
    color: white;
  }
}
</style>

  
  
</head>

<body translate="no">
  <div class="container">
  <nav id="nav">
    <a href="#home"><svg viewBox="0 0 576 512" width="100" title="home">
        <path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.1.........完整代码请登录后点击上方下载按钮下载查看