效果预览按右边“点击预览”按钮在当前页面预览，点击链接全屏预览。https://codepen.io/comehop??e/pen/mKdzZM交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cgnk6Sb源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，标准导航模式：centerdisplay:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义文本和按钮边框样式：navul{padding:0;}navulli{color:white;列表样式类型：无；字体大小：32px；字体系列：无衬线；文本转换：大写；宽度：12em；高度：4em；border:1pxsolidrgba(255,255,255,0.2);;letter-spacing:0.2em;}使用before伪元素定义上下边框，边框颜色会多次使用，所以使用变量::root{--color:dodgerblue;}navulli:：在{内容：''之前；位置：绝对；；宽度：0；高度：0；可见性：隐藏；顶部：0；左：0；border-top:1pxsolidvar(--color);右边框：1pxsolidvar(--color);}同样，使用after伪元素来定义右边框和底边框：navulli::after{content:'';位置：绝对；；宽度：0；高度：0；可见性：隐藏；底部：0；右：0；border-bottom:1pxsolidvar(--color);border-left:1pxsolidvar(--color);}设计borderentry的动画效果，按up,right,down,left依次显示border，为了调整动画的速度，设置时间-相关变量：:root{--time-slot-length:0.1s;--t1x:var(--时隙长度);--t2x:calc(var(--time-slot-length)*2);--t3x:calc(var(--time-slot-length)*3);--t4x:calc(var(--time-slot-length)*4);}navulli:hover::before,navulli:hover::after{width:100%;高度：100%；visibility:visible;}navulli:hover::before{transition:visibility0s,widthlinearvar(--t1x),heightlinearvar(--t1x)var(--t1x);}navulli:hover::after{transition:visibility0svar(--t2x),widthlinearvar(--t1x)var(--t2x),heightlinearvar(--t1x)var(--t3x);}设计动画效果边界出口，与入口顺序相反：navulli::before{transition:heightlinearvar(--t1x)var(--t2x),widthlinearvar(--t1x)var(--t3x),visibility0svar(--t4x);}navulli::after{transition:heightlinearvar(--t1x),widthlinearvar(--t1x)var(--t1x),visibility0svar(--t2x);}让按钮文本在笔触期间改变颜色：navulli{transition:var(--t4x);}navulli:hover{color:var(--color);}最后，在笔划结束后，在按钮周围添加一个脉冲动画以增强动态：navulli:hover{动画：脉冲缓出1svar(--t4x);}@keyframespulse{from{box-shadow:00rgba(30,144,255,0.4);}to{box-shadow:0001emrgba(30,144,255,0);}}你完成了！
