前端日常实战：19#视频演示了如何用纯CSS制作一个有削铁如泥之感的菜单导航特效全屏预览。https://codepen.io/comehop??e/pen/XqYroe互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c7EbPuW请从github下载源码。https://github.com/comehop??e/front-end-daily-challenges/tree/master/019-split-text-menu-effects代码解读定义dom，一个list包含一个listitem，listitem有一个data-文本属性：NewGame中心显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}设置文本样式:.menu{padding:0;}.menuli{list-style-type:none;白颜色;字体大小：3em；字体粗细：粗体；文本转换：大写；文本对齐：居中；行高：1em；width:7em;}绘制文字分割线:.menuli{border-top:1pxsolidyellow;}隐藏文字:.menuli{color:transparent;}添加带有伪元素的文字:.menuli{position:relative;}.menuli::before{内容：属性（数据文本）；位置：绝对；顶部：0；左：0；宽度：100%；color:silver;}向上移动伪元素的文本并垂直跨越分界线：.menuli::before,.menuli::after{top:-0.5em;}上下分界线：.menuli::before{clip-path:polygon(00,100%0,100%50%,050%);}.menuli::after{剪辑路径:多边形(050%,100%50%,100%100%,0100%);在}dom中添加更多菜单项：NewGameLoadGameli>OptionsExit.menuli{margin:0.5em;}添加对于分割线动画效果：.menuli{border-top:1pxsolidtransparent;transition:0.3s;}.menuli:hover{border-top:1pxsolidyellow;}为文字添加动画效果：.menuli::before,.menuli::after{transition:0.3sease-out;}.menuli:hover::before,.menuli:hover::after{color:yellow;过渡：离开0.3s缓出；transition-delay:0.2s;}.menuli:nth-child(odd):hover::before,.menuli:nth-child(even):hover::after{left:-0.15em;}.menuli:nth-child(even):hover::before,.menuli:nth-child(odd):hover::after{left:0.15em;}大功告成！知识点border-tophttps://developer.mozilla.org/en-US/docs/Web/CSS/border-topcontenthttps://developer.mozilla.org/en-US/docs/Web/CSS/contentattrhttps://developer.mozilla.org/en-US/docs/Web/CSS/attrclip-pathhttps://developer.mozilla.org/en-US/docs/Web/CSS/clip-pathtransition-delayhttps://developer.mozilla.org/en-US/文档/Web/CSS/transition-delaynth-child()https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Syntax
