效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/XYKdwg交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cM7RLUG源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，标准导航结构下，
中的每个字母都用包裹：ul>居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景：线性渐变（到右下角，暗灰色，黑色）；}定义文本样式：ul{padding:0;}li{list-style-type:none;}lispan{color:white;字体大小：50px；字体系列：等宽；文本转换：大写；letter-spacing:0.1em;}当鼠标悬停时，用伪元素绘制一个倾斜的背景色块：li跨度{位置：相对；过渡：500毫秒；}li：悬停跨度{颜色：#333；}lispan::before{内容：''；位置：绝对；高度：100%；宽度：0；z-指数：-1；transition:500ms;}li:hoverspan::before{width:70%;变换：旋转（-25deg）；background:white;}设置慢动作延迟，增加动画效果：li:hoverspan{transition-delay:calc(80ms*var(--n)+10ms);}li:hoverspan::before{transition-delay:calc(80ms*var(--n));}lispan:nth-child(1){--n:1;}lispan:nth-child(2){--n:2;}lispan:nth-child(3){--n:3;}lispan:nth-child(4){--n:4;}lispan:nth-child(5){--n:5;}lispan:nth-child(6){--n:6;}lispan:nth-child(7){--n:7;}lispan:nth-child(8){--n:8;}添加单词左侧的垂直线，当鼠标悬停时会变得更亮：li{padding-left:2em;边框：2px实心透明；左边框颜色：银色；transition:500ms;}li:hover{border-left-color:white;}在dom中添加几个按钮，组成一组按钮：最后，文字居中，然后调整按钮间距：li{text-align:center;margin:1em0;}大功告成！
