时间：2023-07-24 20:30:02 | 来源：网站运营
时间：2023-07-24 20:30:02 来源：网站运营
二级导航、导航栏3D立体菜单案例，前端学习，CSS制作二级菜单栏：导航栏下拉菜单、菜单栏是前端工程师常写的功能，在各种网站，电商网站逗游应用。如何写出2级菜单，如何制作3D效果的菜单栏，请跟随本文，带你揭秘。
在线咨询
<ul class="box"> <li>上路 <ul> <li>亚瑟</li> <li>项羽</li> <li>花木兰</li> <li>钟无艳</li> <li>夏侯惇</li> </ul> </li> <li>下路 <ul> <li>鲁班七号</li> <li>狄仁杰</li> <li>李元芳</li> <li>百里守约</li> <li>后裔</li> </ul> </li> <li>中路 <ul> <li>安其拉</li> <li>小乔</li> <li>王昭君</li> <li>小妲己</li> <li>西施</li> </ul> </li> <li>辅助 <ul> <li>蔡文姬</li> <li>孙膑</li> <li>瑶妹</li> <li>桑启</li> <li>明世隐</li> </ul> </li> <li>打野 <ul> <li>孙悟空</li> <li>李白</li> <li>韩信</li> <li>张飞</li> <li>菲</li> </ul> </li> </ul>下面一起看看CSS部分如何实现.box{ width:500px; height:40px; background-color: yellow; /* 水平居中 */ margin:0 auto; }整个菜单栏命名为box，设置宽高，利用margin:0 auto实现水平居中 .box>li{ float: left; width:100px; height:40px; text-align: center; line-height: 40px; }一级菜单设置float：left实现横向显示，根据菜单项的数目，设置宽100px，高40px，再设置文本居中 .box>li>ul{ display: none; }以下为实现二级菜单的核心 .box>li:hover{ background-color: aqua; }当鼠标放在一级菜单时，二级菜单的ul默认的情况下应该:隐藏，通过display:none来实现 .box>li:hover ul{ display: block; background-color: cadetblue; }当鼠标划过一级上面的li的时候让li里面的ul（二级菜单）以cadetblue背景色显示 .box>li>ul>li:hover{ background-color: orange; }当鼠标滑过某一个二级菜单时，某个二级菜单的背景色变为orange补充：需要完整代码的，请咨询我或关注我私聊发送。
活动链接伪类:四个
:link======鼠标访问前
:visited===鼠标访问后
:hover=====鼠标悬停时
:active====鼠标激活瞬间
如果一同使用的时候,经常应用在a标签上面
但是hover会经常单独行动使用:用来做划过效果
<ul class="box"> <li>上路 <ul> <li><a>亚瑟</a></li> <li><a>项羽</a></li> <li><a>花木兰</a></li> <li><a>钟无艳</a></li> <li><a>夏侯惇</a></li> </ul> </li> <li>下路 <ul> <li>鲁班七号</li> <li>狄仁杰</li> <li>李元芳</li> <li>百里守约</li> <li>后裔</li> </ul> </li> <li>中路 <ul> <li>安其拉</li> <li>小乔</li> <li>王昭君</li> <li>小妲己</li> <li>西施</li> </ul> </li> <li>辅助 <ul> <li>蔡文姬</li> <li>孙膑</li> <li>瑶妹</li> <li>桑启</li> <li>明世隐</li> </ul> </li> <li>打野 <ul> <li>孙悟空</li> <li>李白</li> <li>韩信</li> <li>张飞</li> <li>菲</li> </ul> </li> </ul>主要看如何实现3D效果的二级菜单，看一下CSS代码，重点是hover效果这一段代码，如下 .box>li:hover ul { display: block; } .box>li>ul>li { position: relative; width: 200px; background: #3e3f46; margin-top: 35px; z-index: var(--i); transition: .5s; cursor: pointer; } .box>li>ul>li::before { content: ''; position: absolute; top: 0; left: -40px; width: 40px; height: 100%; background: #35383e; transform-origin: right; transform: skewY(45deg); transition: .5s; } .box>li>ul>li::after { content: ''; position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: #35383e; transform-origin: bottom; transform: skewX(45deg); transition: .5s; } .box>li>ul>li:hover { background: #33a3ee; transform: translateX(50px); } .box>li>ul>li::before { background: #2982b9; } .box>li>ul>li::after { background: #1f5378; } .box>li>ul>li>a { text-decoration: none; color: #ccc; display: block; text-transform: uppercase; letter-spacing: .05em; transition: .5s; } .box>li>ul>li:hover { color: #fff; } .box>li>ul>li:last-child::after { box-shadow: -100px 100px 20px rgba(0, 0, 0, .25); }补充：3d立体效果需要完整代码的，请咨询我或关注我私聊发送。
在你的x轴和y轴的基础上多个一个立体的z轴,会形成一个立体空间
z轴相当于是从屏幕串过来的一跳轴线
离眼睛越来越近的方向被称之为正向(正数);离眼睛越来越远的方向被称之为负向(负数)
学习3d立体效果的时候,我主要学习的是3d上面的函数: 平移,旋转和缩放
属性:transform属性
前提:要想使用看到立体效果:必须要触发3d旋转舞台
如何触发:transform-style:preserve-3d(3d)/flat(2d)
3d里面上面的高级函数
1)平移:
transform:translateX()
translateY()
translateZ()===z周上面的移动
translate3d(x,y,z)
2)旋转:
transform:rotateX()
rotateY()
rotateZ()======效果与绕着中心旋转一致
rotate3d(x,y,z,numdeg)
x,y,z===向量值0-1 向量===具有方向的一个量
立方体案例中应用
3)缩放:
transform:scaleX()
scaleY()
scaleZ()===注意事项:z周上面如果想要实现缩放必须配合其他的函数一起使用
会出现一个近大远小的效果===配合平移是先用
使用缩放的时候还需要注意一个: 需要添加一个视距 一般添加在父元素上面
视距的取值最佳一般在900-1200
视距:眼睛到物体的距离
关键词：导航,学习,立体
