css3制作3d导航条

使用 CSS3 制作 3D 导航条

基础 HTML 结构

<nav class="nav-3d">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

核心 CSS3 样式

.nav-3d ul {
  list-style: none;
  display: flex;
  perspective: 1000px; /* 启用 3D 空间 */
}

.nav-3d li {
  margin: 0 10px;
  transform-style: preserve-3d; /* 子元素保持 3D 变换 */
}

.nav-3d a {
  display: block;
  padding: 15px 25px;
  background: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transform: rotateX(20deg); /* 初始倾斜角度 */
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.nav-3d a:hover {
  transform: rotateX(0deg) translateY(-10px); /* 悬停时抬升效果 */
  background: #2980b9;
  box-shadow: 0 15px 20px rgba(0,0,0,0.2);
}

添加深度效果

.nav-3d a::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  background: #1a5276;
  transform-origin: top;
  transform: rotateX(-90deg); /* 创建底面 */
  opacity: 0.7;
  border-radius: 0 0 5px 5px;
}

动画增强

@keyframes float {
  0% { transform: rotateX(20deg) translateY(0); }
  50% { transform: rotateX(20deg) translateY(-5px); }
  100% { transform: rotateX(20deg) translateY(0); }
}

.nav-3d li:nth-child(odd) a {
  animation: float 3s ease-in-out infinite;
}

.nav-3d li:nth-child(even) a {
  animation: float 3s ease-in-out infinite 1.5s;
}

响应式调整

@media (max-width: 768px) {
  .nav-3d ul {
    flex-direction: column;
    perspective: none;
  }

  .nav-3d li {
    margin: 5px 0;
  }

  .nav-3d a {
    transform: none;
  }

  .nav-3d a:hover {
    transform: translateY(-5px);
  }
}

关键点说明：

• perspective 属性创建 3D 空间
• transform-style: preserve-3d 保持嵌套元素的 3D 效果
• 伪元素 ::before 模拟 3D 厚度
• 动画实现浮动效果增强立体感
• 媒体查询确保移动设备兼容性