使用 CSS 进行创意悬停菜单

在本文中，我们将制作导航菜单，但它将采用垂直布局，我建议您将其用作全页菜单。我们不会讨论如何切换汉堡菜单之类的内容。如果您希望我解释，请在评论区告诉我。我可以在另一篇文章中介绍。首先，让我们看看我们要构建什么——

预览

在我们查看整个代码之前，让我先概述一下一些效果。

发光效果
当您将鼠标悬停在文本上时，您可以看到文本中的发光效果。这可以通过以下 CSS 属性实现 -



  text-shadow: 0 0 7px #fff, 
               0 0 10px #fff, 
               0 0 21px #fff, 
               0 0 42px #0fa,
               0 0 82px #0fa, 
               0 0 92px #0fa, 
               0 0 102px #0fa, 
               0 0 151px #0fa;

文本间距效果
我使用了带有字母间距属性的动画。您可以通过以下代码实现 -




@keyframes animate {
  from {
    opacity: 0;
    letter-spacing: 50px;
  }
  to {
    opacity: 1;
    letter-spacing: 5px;
  }
}

HTML



<nav class="navbar">
  <ul class="nav_list">
    <!--....More Links...-->
    <li>
      <a href="#">
        <p class="link">about</p>
        <p class="hidden_link">about</p>
      </a>
    </li>
   <!--....More Links...-->
  </ul>
</nav>

在 HTML 中，我们有.navbar包裹整个导航菜单的，然后我们有无序列表，其中有li，在里面我们有锚点（a）标签，其中还包含两个段落（p）标签，一个是较大的（.link），另一个是隐藏的（.hidden_link），只会在上可见hover。

CSS




/* Default values */
* {
  margin: 0;
  padding : 0;
}
ul > li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* Relative navigation list item */
.nav_list > li {
  position: relative;
  margin: 8px 0;
}

.nav_list > li > a {
  color: #fff;
  text-align: center;
}

.nav_list > li > a p {
  text-transform: uppercase;
}

.nav_list > li > a > .link {
  font-size: 2rem;
  transition: opacity 300ms ease-in-out;
}

.nav_list > li > a .hidden_link {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  color: #fff;
  background: transparent;
  text-align: center;
  text-shadow: 0 0 7px #fff, 
               0 0 10px #fff, 
               0 0 21px #fff, 
               0 0 42px #0fa,
               0 0 82px #0fa, 
               0 0 92px #0fa, 
               0 0 102px #0fa, 
               0 0 151px #0fa;

  /*  animation "from"  */
  opacity: 0;
  letter-spacing: 50px;
  pointer-events: none;
}

/* Low opacity of main Link */
.nav_list > li > a:hover > .link {
  opacity: 0.3;
}

/* Show the Hidden link with animation */
.nav_list > li > a:hover > .hidden_link {
  animation: show-link 400ms ease-in-out forwards;
}

@keyframes show-link {
  to {
    opacity: 1;
    letter-spacing: 5px;
    pointer-events: all;
  }
}

推荐设备-台式机/笔记本电脑。

结论

现在你也可以自己动手做了。现在你应该制作一个汉堡包或导航切换按钮，并显示这个导航栏。或许可以加一些滑动动画。如果你有任何疑问或建议，欢迎随时在评论区留言。

现在您可以通过给我买一杯咖啡来表示您的支持。😊👇

另请阅读

文章来源：https://dev.to/j471n/creative-hover-menu-with-css-513c