效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/XqYroe可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。https://scrimba.com/p/pEgDAM/c7EbPuW源代码下载请从 github 下载。https://github.com/comehope/front-end-daily-challenges/tree/master/019-split-text-menu-effects代码解读定义 dom，一个列表中包含一个列表项，列表项有一个 data-text 属性：<ul class="menu"> <li data-text="New Game">New Game</li></ul>居中显示：html,body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black;}设置文本样式：.menu { padding: 0;}.menu li { list-style-type: none; color: white; font-size: 3em; font-weight: bold; text-transform: uppercase; text-align: center; line-height: 1em; width: 7em;}画出文字的分割线：.menu li { border-top: 1px solid yellow;}隐藏文本：.menu li { color: transparent;}用伪元素增加文本：.menu li { position: relative;}.menu li::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; color: silver;}把伪元素文本向上移，竖跨分割线：.menu li::before,.menu li::after { top: -0.5em;}用遮罩切出分割线上下二部分的文本：.menu li::before { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);}.menu li::after { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);}dom 中再增加几个菜单项：<ul class="menu"> <li data-text="New Game">New Game</li> <li data-text="Load Game">Load Game</li> <li data-text="Options">Options</li> <li data-text="Exit">Exit</li></ul>.menu li { margin: 0.5em;}为分割线增加动画效果：.menu li { border-top: 1px solid transparent; transition: 0.3s;}.menu li:hover { border-top: 1px solid yellow;}为文字增加动画效果：.menu li::before,.menu li::after { transition: 0.3s ease-out;}.menu li:hover::before,.menu li:hover::after { color: yellow; transition: left 0.3s ease-out; transition-delay: 0.2s;}.menu li:nth-child(odd):hover::before,.menu li:nth-child(even):hover::after { left: -0.15em;}.menu li:nth-child(even):hover::before,.menu li:nth-child(odd):hover::after { left: 0.15em;}大功告成！知识点border-top https://developer.mozilla.org/en-US/docs/Web/CSS/border-topcontent https://developer.mozilla.org/en-US/docs/Web/CSS/contentattr https://developer.mozilla.org/en-US/docs/Web/CSS/attrclip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-pathtransition-delay https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delaynth-child() https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Syntax
