现代CSS：纯 CSS 实现3D导航栏
随着现代 CSS 技术的发展，CSS 新特性被越来越多的浏览器所支持，本文主要讲述使用纯 CSS 实现3D导航栏的步骤，并对其中用到的关键样式做一个解析。
1.整体效果
2.实现方案
实现方案将从一个基础的样式写起，然后逐渐添加响应的伪元素来实现不同的边，实现3D效果。与此同时，实现的过程中还给导航设置了动画，方便鼠标 hover 的时候有个更好地用户体验。
2.1.基础框架编写
小懒首先通过 html:5 快速创建 html5 页面基础框架，然后通过 schema div[class=container]>ul[class=navlist]>(li>a[href=#])*5 快速创建导航 html 框架。同时给基础框架增加了基础样式，样式中我们使用了现代 CSS 的一些特性，比如 CSS 元素嵌套（现代CSS：你真的还需要 CSS 预处理器吗？）、CSS 自定义属性等新的特性。
<style>
:root {
--color: #4855B0;
}
body { margin: 0; padding: 0}
.container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
.navlist {
list-style: none;
padding: 0;
& li {
& a {
display: block;
padding: 15px 25px;
background-color: var(--color);
color: #fff;
text-decoration: none;
&:hover {
--color: #f00;
left: -20px;
}
}
}
}
}
</style>
<!--div[class=container]>ul[class=navlist]>(li>a[href=#])*5-->
<div class="container">
<ul class="navlist">
<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>
</div>
效果如下：
2.2.3D效果实现
为了实现 3D 效果，需要旋转对各面做倾斜变化，正面需要Y轴倾斜 -15deg，侧面需要Y轴倾斜 45deg，顶面需要X倾斜 45deg。侧面和顶面我们使用 CSS 伪元素 ::before 和 ::after 来实现。在CSS 实现中背景颜色我们使用 color-mix 颜色混合函数来自动计算背景颜色。
// 正面
a {
transform: skewY(-15deg);
}
a {
&::before {
position: absolute;
left: -20px;
bottom: 10px;
width: 20px;
height: 100%;
content: "";
background-color: color-mix(in srgb, var(--color), black 20%);
transform: skewY(45deg);
transition: background-color 200ms;
}
&::after {
position: absolute;
left: -10px;
top: -20px;
width: 100%;
height: 20px;
content: "";
background-color: color-mix(in srgb, var(--color), black 20%);
transform: skewX(45deg);
}
}
效果图如下：
从上面效果图可以看到，3D效果已经实现，但是顶面和正面的层级还是有点问题，以至于效果看着比较别扭，我们再整体调试一节中将调试细节。
请注意：color-mix 函数虽然得到大多数现代浏览器的支持，但是在生成环境中请谨慎使用。
2.3.整体调试
1）首先对导航的各项做了层级定义：
& li {
&:nth-child(1) {
& a {
z-index: 5;
}
}
&:nth-child(2) {
& a {
z-index: 4;
}
}
&:nth-child(3) {
& a {
z-index: 3;
}
}
&:nth-child(4) {
& a {
z-index: 2;
}
}
&:nth-child(5) {
& a {
z-index: 1;
}
}
}
对顶面的伪元素设置层级
&::after {
z-index: -1;
}
给各面定义动画
& a {
transition: left 200ms, background-color 200ms;
&::before {
transition: background-color 200ms;
}
&::after {
transition: background-color 200ms;
}
}
4）整体实现代码
<style>
:root {
--color: #4855B0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
padding-top: 150px;
.navlist {
list-style: none;
padding: 0;
transform: skewY(-15deg);
& li {
&:nth-child(1) {
& a {
z-index: 5;
}
}
&:nth-child(2) {
& a {
z-index: 4;
}
}
&:nth-child(3) {
& a {
z-index: 3;
}
}
&:nth-child(4) {
& a {
z-index: 2;
}
}
&:nth-child(5) {
& a {
z-index: 1;
}
}
& a {
position: relative;
left: 0;
display: block;
padding: 15px 25px;
background-color: var(--color);
color: #fff;
text-decoration: none;
transition: left 200ms, background-color 200ms;
&::before {
position: absolute;
left: -20px;
bottom: 10px;
width: 20px;
height: 100%;
content: "";
background-color: color-mix(in srgb, var(--color), black 20%);
transform: skewY(45deg);
transition: background-color 200ms;
}
&::after {
position: absolute;
left: -10px;
top: -20px;
width: 100%;
height: 20px;
content: "";
background-color: color-mix(in srgb, var(--color), black 20%);
transform: skewX(45deg);
transition: background-color 200ms;
z-index: -1;
}
&:hover {
--color: #f00;
left: -20px;
}
}
}
}
}
</style>
<div class="container">
<ul class="navlist">
<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>
</div>
3.总结
现代 CSS 赋予了现代开发者更多的能力，之前需要使用 JavaScript 来解决的业务需求，现在可以通过纯 CSS 来实现了，这对开发者是一大利好。有句话能用CSS能实现的，尽量不要用 JavaScript 来实现。
大家都在看