效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/mGbpqv互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cMwkJhG源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，导航包含一个无序列表，列表中有一个列表项：居中显示：body{保证金：0；高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:teal;}隐藏列表项前面的前导符号：navul{padding:0;list-style-type:none;}definition按钮容器大小::root{font-size:10px;}navli{width:20rem;height:7rem;}设置文字样式:navli{font-size:20px;文本对齐：居中；行高：7rem；字体系列：无衬线；文本转换：大写；letter-spacing:1px;}用伪元素制作2个背景色块：navli{position:relative;}navli::before,navli::after{content:'';位置：绝对；宽度：继承；身高：继承；顶部：0；left:0;}navli::before{background-color:white;z-index:-1;}navli::after{背景列或：一枝黄花；z-index:-2;}让后面的背景块向右下方移动，让前面的背景块投射阴影，增加三维效果：navli::before{box-shadow:0.2rem0.2rem0.5remrgba(0,0,0,0.2);}navli::after{transform:translate(1.5rem,1.5rem);}接下来添加悬停效果并设置缓动时间，主元素和伪元素会beWitheasingeffect:navli{transition:0.3s;}navli::before,navli::after{transition:0.3s;}悬停时，两个背景色块的颜色互换：navli:hover::before{background-color:goldenrod;}navli:hover::after{background-color:white;}同时，背景色块向左上方移动，按钮整体向左移动右下角：navli:hover{transform:translate(1.5rem,1.5rem);}navli:hover::after{transform:translate(-1.5rem,-1.5rem);}另外，让文本改变颜色hover:navli:hover{color:white;}再添加几个按钮：最后，增加按钮之间的间距：navli{margin:3rem;}就大功告成了！
