原文地址:https://segmentfault.com/a/1190000014836748
感想: 把原元素隐藏,利用伪元素::before 和 ::after 各取上下一半 clip-path 切割图片
HTML代码:
<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>
CSS代码:
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background-color: black; } .menu li { position: relative; list-style-type: none; color: transparent; font-size: 3em; text-transform: uppercase; text-align: center; line-height: 1em; width: 7em; margin: 0.5em; /* 画出文字的分割线 */ border-top: 1px solid transparent; transition: 0.3s; } .menu li:hover{ border-top: 1px solid yellow; } /* 用伪元素添加文本 */ .menu li::before, .menu li::after{ position: absolute; /* 插入元素的属性值 */ content: attr(data-text); top: 0; left: 0; width: 100%; color: silver; } /* 把伪元素文本向上移,竖跨分割线 */ .menu li::before, .menu li::after { top: -0.5em; transition: 0.3 ease-out; } /* 用遮罩切出分割线上下二部分的文本 */ .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%); } .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; }
原文地址:https://www.cnblogs.com/FlyingLiao/p/10254488.html
时间: 2024-09-30 02:05:20