基于CSS3制作立体效果导航菜单

关于“基于CSS3制作立体效果导航菜单”的完整攻略，我将分享以下步骤：

步骤一：HTML 代码

首先，我们需要编写导航菜单的 HTML 代码。如下所示：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

步骤二：CSS 样式

接下来，我们需要编写样式代码来实现立体效果并将菜单项排列在一行。如下：

nav {
  text-align: center;
}

ul {
  margin: 0 auto;
  padding: 0;
  display: inline-block;
}

li {
  display: inline-block;
  margin: 0 20px;
}

a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  position: relative;
}

a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #fff;
  opacity: 0;
  transform: perspective(5px) rotateX(5deg);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

a:hover:before {
  opacity: 0.6;
  transform: perspective(5px) rotateX(0);
}

步骤三：样式说明

上述代码的详细说明如下：

• nav 元素需要设置 text-align: center，这样才能使导航菜单水平居中。
• ul 元素的外边距需要设置为 0 auto，内边距设置为 0，并设置为 inline-block，这样才能使菜单项水平排列在一行。
• li 元素需要设置为 display: inline-block，这样才能使菜单项水平排列在一行，并且需要设置左右边距为 20px，这样才能使菜单项之间有足够的间距。
• a 元素需要设置为 display: inline-block，并设置内边距为 10px 20px，这样才能定义菜单项的大小和间距。同时，还需要设置背景颜色和前景颜色，并去除下划线和默认样式。
• 接下来，使用 :before 伪元素创建一个覆盖整个菜单项的白色层，并且设置为 position: absolute，并且设置 top 值为 100%，即该层显示在菜单项下方。同时，需要将 opacity 和 transform 属性设置为 0，使其不可见。
• 最后，通过添加 :hover 选择器来使白色层渐变显示出来，也就形成了立体效果。

示例

示例1

可以在 Codepen 上查看第一个示例。

示例2

如果想拥有不同的 hover 效果，比如下方方向的立体效果，代码可以稍微修改一下，如下：

a:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: bottom center;
  transform: perspective(5px) rotateX(-5deg) translateZ(-1px);
}

a:hover:before {
  opacity: 0.6;
  transform: perspective(5px) rotateX(0) translateZ(-1px);
}

更多示例可以在 Codepen 上查看。